Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "css selector knowledge points", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the knowledge points of css selector" this article.

There are three types of selectors: tag name selector, class selector, and ID selector. The so-called descendant selector and group selector are just extended applications of the first three selectors.

The order of CSS selector efficiency from high to low is as follows:

1.id selector (# myid)

two。 Class selector (.myclassname)

3. Tag selector (div,h2,p)

4. Adjacent selector (h ~ 2 _ selecp)

5. Sub-selector (ul > li)

6. Descendant selector (li a)

7. Wildcard selector (*)

8. Property selector (a rel = "external"])

9. Pseudo-class selector (a:hover, li:nth-child)

In general, the more special the selector, the higher its priority. That is, the more accurately the selector points, the higher its priority.

For what selector to use under what circumstances, the principles for using different selectors are:

1. Accurately select the label you want to control

2. Use the selector with the most reasonable priority

3. HTML and CSS code should be as simple and beautiful as possible. Usually:

The most commonly used selector in ① is the class selector.

② li, td, dd and so on often appear a large number of tags with the same or similar style. We use the descendant selector .xx li/td/dd {}, which is a combination of class selector and signature selector.

③ rarely uses ID selectors, and of course many front-end developers like header,footer,banner,conntent to be set to ID selectors, because the same style can't be used twice on a page.

Our goal is to be efficient, introduction to css

The so-called efficient CSS is to let the browser do as little search as possible when looking for style matching elements. In fact, browser CSS matching does not search from left to right, but from right to left. For example, DIV#divBox p span.red {color:red;}, the search order of the browser is as follows:

First look for all the span elements of class='red' in html, and then find whether there are p elements in their parent elements, and then determine whether there are div elements whose id is divBox in the parent element of p, and match them if they all exist. The advantage of browsers searching from right to left is to filter out some irrelevant style rules and elements as soon as possible.

Here are some of our common inefficient mistakes in writing CSS:

1. Try not to use tag signatures in front of ID selector and class selector

Eg:

Example of selector

Div#box {.} / * General Writing * /

# box {.} / * easier to write * /

Span .eg {.} / * General Writing * /

.eg {.} / * easier to write * /

Note: but when you define multiple classes called eg on your page, you need to write them in a hierarchical way.

two。 Use hierarchical relationships as little as possible

General description: # divBox P.red {color:red;}

Better way to write: .red {.}

3. Using class instead of hierarchical relationships

General description: # divBox ul li a {display:block;}

Better to write: .block {display:block;}

These are all the contents of the article "what are the knowledge points of css selectors?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.