Summary of selector types in CSS and efficiency comparison examples

This article mainly introduces the summary and efficiency comparison of selector types in CSS, including pseudo-class selectors and pseudo-element selectors. Friends in need can refer to it

We all know that CSS has Additivity (the same element is specified by multiple style rules), inheritance (descendant elements will inherit some styles and attributes of predecessor elements) 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 only follows one rule. The more specific it is, the higher the priority.)

It can be seen from the above that the more specific the selector is, the higher its priority will be. The higher the level,

Here, let’s summarize the css selectors:

1. Basic selectors (tag selector, universal selector, class and ID selection Selector)

##SelectorDescriptionCSS VersionE Tag selector, matches all elements using the E tag##*.info#footer

Universal element selector, matches any element
class Selector, matches all elements containing info in the class attribute
id selector, matches all id attributes equal to The element of footer

##2. Multi-element combination selector (label selector [group selector ], descendant selector, child element selector, adjacent selector)

selectorDescriptionCSS VersionE, FMulti-element selector, matches all E elements simultaneously or F elements, separated by commas between E and F E F contains the selector, matching all elements contained by E The F element child element selector matches all the child elements F Adjacent element selector, matches all sibling elements immediately following the E element F Match any sibling F tag after the E tag##3. Attribute selector

		##E>F
of the E element		E+F
		##E~F

Selector

DescriptionCSS Version Matches all E elements with the attribute attribute, regardless of it value. (Note: E can be omitted here, such as "[cheacked]". The same below.) 2.12.12.1##E[attribute^=value] Any sibling F tag after the E tag 2.14. Pseudo-class selector

		E[attribute]
	E[attribute=value]	Match all E elements whose attribute attribute is equal to "value"
	E[attribute~=value]	Match all attribute attributes with Matches multiple space-separated values, E elements where one value is equal to "value"
##E[attribute$=value]	Matches all attribute attribute values ​​​​containing "value "E element	3
E[attribute*=value]	matches all E elements whose attribute attribute value ends with "value"	3

5. Pseudo-element selector

##Selector

Description

CSS version

E:first-lineMatch the first line within all E tags2.1 E:first-letter Matches the first letter in all E tags2.1E:beforeInsert the generated content before the E tag2.1E:afterAfter the E tag Then insert the generated content2.1

Here, what we need to know is how the browser reads the selector. Chris Coyier once said in the article "Efficiently Rendering CSS" that "the browser reads your selector and follows 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 Proceed from right to left.”

The last part of the selector, which is the rightmost part of the selector (in this example, the a[title] part) is called the "key selector", which will determine the efficiency of your selector. how? Is it high or low.

So how to make key selectors more effective and performant? In fact, it is very simple. The main thing is 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 given by Steve Souders:

                                                                                                                                                                                                                            )
      5. Child selector (ul > li)
        6. Descendant selector (li a)
      7. Wildcard selector (*)
    8. Attribute selector (a[rel "external"])
9. Pseudo-class selector (a:hover,li:nth-child)
The efficiency of the above nine selectors is ranked from high to low, and the ID selector is the base. The efficiency is the highest, while the efficiency of the 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 the above. Because the rightmost key selector is the most specific, it also conforms to the selector priority order above.

The above is the detailed content of Summary of selector types in CSS and efficiency comparison examples. For more information, please follow other related articles on the PHP Chinese website!