CSS selectors, precedence and matching principles

CSS 2.1 Selectors, Part 1

Calculates the priority of the specified selector: re-recognize the weights of the CSS

1. The weighted value of the wildcard selector 0,0,0,0
2. The weight value of the label is 0,0,0,1
3. The weight value of the class is 0,0,1,0
4. The weight value of the property selection is 0,0,1,1 0,0,1,0
5. The weights for pseudo-class selection are 0,0,1,0
6. The weight value of the pseudo-object selection is 0,0,0,1
7. The weight of the ID is 0,1,0,0
8. The important weights are the highest 1,0,0,0

The rules used are also very simple, that is, the weights of the selectors are added together, the big priority, and if the weights are the same, then the precedence is defined . Although it is very simple, but if you do not notice when writing, it is easy to lead to a duplicate CSS definition, code redundancy.

From the above we can draw two key factors:

1. The size of the weights is related to the type and number of selectors
2. The precedence of a style is related to the order in which the styles are defined

Remember reading an article before 256 class class name selector kill an ID selector instance page

Http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

Gecko overflows the count of classes into the count of IDs, each of the which holds 8 Bits.-cameron McCormack (@heycam) Augus T 16, 2012

The answer is: all class names (classes) are stored in a 8- byte string . The maximum value that 8 bytes can hold is 255. When 256 classes are present, it is bound to cross the edge and overflow to the ID area.

Summarize:

Compare the number of the same level, the number of high priority, if the same is compared to the next level of the number of levels of priority, we should have been very clear, is:

Important > Inline > ID > class > tags | Pseudo Class | Property selection > Pseudo-object > inheritance > Wildcard wildcard > Inheritance

This also explains why the definition of 11 tags is less than the definition of 1 classes, 1 classes plus 11 tags will be less than the weight of 2 classes.

Selector type

The following are some of the possible references:

• A wildcard selector

• Type Selector

• ID Selector

• Class Selector

• Include selector

• Child element Selector

• Adjacent sibling selector

• Property Selector

CSS1-CSS3 offers a very rich selection of selectors, but because some selectors are not supported by individual browsers, many selectors are rarely used in actual CSS development

About the efficiency of CSS execution:

1. The style system starts the matching rule from the rightmost selector to the left. As long as there are other selectors on the left side of the current selector, the style system will continue to move to the left until it finds the element that matches the rule, or exits because of a mismatch.
2. If you really care about the performance of the page, don't use the CSS3 selector. In fact, in all browsers, rendering with class and ID is more interesting than using siblings, descendant selectors, sub-selectors (sibling, descendant, and child selectors) to improve page performance.

Steve Souders, Google's senior web development engineer, made a sort of high-to-low efficiency for CSS selectors:

1. 1.id selector (#myid) 2. Class selector (. myclassname) 3. Tag Selector (div,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)
2. The ID selector in the above nine selectors is the most efficient, while the efficiency of the pseudo-class selector is the lowest
3. Detailed introduction You can also click Writing efficient CSS selectors.

CSS selectors, precedence and matching principles