A summary of selector types in CSS and examples of efficiency comparisons

This article mainly introduces the selection of CSS in the summary and efficiency comparison, including pseudo-class selectors and pseudo-element selectors, the need for friends can refer to the following

As we all know, CSS is additive (the same element is specified by multiple style rules), inheritance (descendant elements inherit some of the styles and attributes of the predecessor Element) and precedence (due to the CSS's superposition and inheritance, the precedence is generated, which refers to which style rule will ultimately work on the specified element, He only follows a rule, specifying the more specific, the higher the priority)

From the above, the more specific the selector specifies, the higher his priority is,

Here, let's summarize the CSS selector:

Basic selector (Tag Selector, universal selector, class, and ID selector)

Selector

Selector	Description	CSS Version
E	Tag selector that matches all elements that use the e tag
*	Universal element selector to match any element
. info	Class selector that matches all elements of the class attribute that contain info
#footer	ID selector that matches all elements of the id attribute equal to footer

Two, multi-element combination selector (tag Selector [group selector], descendant selector, child element selector, adjacent selector)

Selector

Selector	Description	CSS Version
E,f	Multi-element selector that matches all E 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 all e element's son element f
E+f	Adjacent element selector, matching all sibling elements immediately following the E element f
E~f	Match any of the E tags after the sibling f tag

Third, attribute selector

Selector

Selector	Description	CSS Version
E[attribute]	Matches all e elements that have the attribute attribute, regardless of its value. (Note: E can be omitted here, such as "[cheacked]". to the same. ）	2.1
E[attribute=value]	Match all E elements that have the attribute attribute equal to "value"	2.1
E[attribute~=value]	Matches all attribute attributes that have multiple space-delimited values, where one value equals "value" of the E element	2.1
E[attribute^=value]	Match any of the E tags after the sibling f tag	2.1
E[attribute$=value]	Match all attribute attribute values containing the E element with "value"	3
E[attribute*=value]	Match all attribute attribute values are e elements that end with "value"	3

Four, pseudo-class selector

Five, pseudo-element selector

Selector

Selector	Description	CSS Version
E:first-line	Matches the first line in all E-tags	2.1
E:first-letter	Matches the first letter in all E-tags	2.1
E:before	Insert the generated content before the e tag	2.1
E:after	Insert the generated content after the e tag	2.1

What we need to know here is how the browser reads the selector. Chris Coyier once said in the efficiently Rendering CSS article "The browser reads your selector and follows the principle of reading from the right side of the selector to the left." In other words, the order in which the browser reads the selectors 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 "key selector," which will determine how efficient your selector is. Whether it is high or low.

So how do you make a key selector more effective and more performance-efficient? Actually very simple, the main grasp a little "more specific key selector, its performance is higher"

The selector has an intrinsic efficiency, and we look at the order in which Steve Souders gives the platoon:

1.id Selector (#myid)
2. Class selector (. myclassname)
3. Tag Selector (p,h1,p)
4. Adjacent selector (h1+p)
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)
The efficiency of the above nine selectors is from high to low, and the efficiency of the ID selector is the highest in the base, while the efficiency of the pseudo-class selector is the lowest.

Let's compare these examples to see who has the highest efficiency:

1. #myId span
2. Span #myId
From the above example, we can know that the following efficiency is higher than the above. Because the rightmost key selector is the most specific, it also conforms to the selector precedence order above.