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

This article mainly explains the "introduction of selector types and efficiency comparison in CSS". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the introduction of selector types and efficiency comparison in CSS".

As we all know, CSS has superposition (the same element is specified by multiple style rules), inheritance (descendant elements inherit some styles and attributes of their predecessors) and priority (due to the superposition and inheritance of CSS, priority will be generated, which refers to which style rule will eventually act on the specified element. It follows only one rule, and the more specific it is specified, the higher the priority.)

As we can see from the above, the more specific the selector specifies, the higher its priority.

Here, let's summarize the selector of css:

Basic selector (tag selector, generic selector, class and ID selector)

Selector describes the CSS version E tag selector, which matches all elements that use the E tag

* generic element selector that matches any element

.infoclass selector that matches all elements that contain info in the class attribute

# footerid selector that matches all elements whose id attribute is equal to footer

2. Multi-element combination selector (tag selector [group selector], descendant selector, sub-element selector, adjacent selector)

The selector describes the CSS version of the Efein F multi-element selector, which matches all E elements or F elements, separated by commas between E and F

E F contains selectors that match all F elements contained by the E element

E > F child element selector, matching the child element F of all E elements

ESelector F is adjacent to the element selector, matching all sibling elements F immediately after the E element

F tags of the same level after matching any E tags

Third, attribute selector

The selector describes that the CSS version E [attribute] matches all E elements with the attribute attribute, regardless of its value. (note: e can be omitted here, such as "[cheacked]". The following is the same. ) 2.1E [attribute=value] matches all E elements where the attribute attribute is equal to "value" 2.1E [attribute~=value] matches all attribute attributes with multiple space-separated values, one of which is equal to "value" E element 2.1E [attribute^ = value] matches the sibling F tag 2.1E [attribute$=value] matches all attribute attribute values containing "value" E element 3e [attribute * = value] matches all attribute attribute values ending with "value" E element 3

Fourth, pseudo-class selector

5. Pseudo element selector

The selector describes the CSS version E:first-line matches the first line in all E tags 2.1E:first-letter matches the first letter in all E tags 2.1E:before inserts the generated content before the E tag 2.1E:after inserts the generated content after the E tag

What we need to know here is how the browser reads the selector. Chris Coyier once said in "Efficiently Rendering CSS" that "the browser reads your selector, following the principle of reading from the right to the left of the selector. In other words, the order in which the browser reads the selector is from right to left."

The last part of the selector, the rightmost part of the selector (in this case, the a [title] section) is called the "critical selector", and it will determine the efficiency of your selector. Whether it's high or low.

So how to make the key selector more efficient and more performance-oriented? In fact, it is very simple to grasp one point: "the more specific the key selector, the higher its performance."

Selectors have an inherent efficiency. Let's take a look at the order in which Steve Souders arranges:

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 (aVRV hover.livnthmurchild)

The efficiency of the above nine selectors is ranked from high to low, of which the efficiency of ID selector is the highest and that of pseudo-class selector is the lowest.

Let's compare these examples to see who is the most efficient:

1. # myId span

2. Span # myId

From the above example, we can know that the efficiency below is higher than that above. Because the rightmost key selector is the most specific, it also conforms to the priority order of the selector mentioned above.

Thank you for your reading, the above is the content of "introduction of selector types and efficiency comparison in CSS". After the study of this article, I believe you have a deeper understanding of the introduction of selector types and efficiency comparison in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.