Detailed explanation of the pronunciation of CSS priority. CSS priority includes four levels (in-text selector, ID selector, Class selector, element selector) and the number of occurrences of each level. The priority of CSS is calculated based on the number of occurrences of these four levels.
The priority reading should be divided into "groups". The groups are independent of each other and compared from left to right. They appear in groups, separated by commas.
selector( a , b , c , d )
compare: ↑ , ↑ , ↑ , ↑
selector( a , b , c , d )
As shown in the original text in w3c.org, it is divided into four groups a, b, c, and d, all of which are positive integers. The default is 0, which corresponds to different selector structures and composition forms. When comparing the priorities between selectors, compare one to one from left to right. When the comparison is greater, the comparison can be stopped.
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0 , 0 , 2 , 1 */
/*compare ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0 , 0 , 1 , 1 */
/*compare ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0 , 0 , 1 , 3 */
/*compare ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0 , 1 , 0 , 0 */
/*compare ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0 */
(In the above table, ↑ means that comparison is still needed, and √ means that the results have been obtained from here. result)
Furthermore, as long as it is written correctly, the structure of the selector can be roughly known only from the priority, such as:
1,0,0,0 indicates the style within the element;
0,2,1,1 represents a selector consisting of two ID selectors, a class or pseudo-class or attribute selector, and an element selector.
Details of CSS precedence rules:
After correcting the pronunciation, we can start talking about the detailed rules:
The value of group a will only be 1 when CSS is written into the style attribute, otherwise it will be 0. The style statement written into style is not actually a selector, so the values of group b, c, and d here are all 0, and only the actual Only the selector will have group b, c, d values.
The b group value is determined by the ID selector #ID, how many ID selectors there are, and the group value will be accumulated;
The c group of values is determined by the class, pseudo-class and attribute selector, and the group of values will be accumulated;
The d group of values is determined by the element name, that is, the element selector, and the group of values will be accumulated;
Note that these four sets of values correspond to different types of selectors and do not affect each other. They are compared according to the reading rules.
!important, the proximity principle and inheritance are not discussed here, and there is no example code. Everyone is welcome to come to webjx.com to discuss!
Here are some examples: CSS priority issues CSS priority includes four levels (text selector, ID selector, Class selector, element selector) and the number of occurrences of each level. The priority of CSS is calculated based on the number of occurrences of these four levels.
The calculation rules for CSS priority are as follows:
* The style defined in the page, add 1,0,0,0
* For each ID selector (such as #id), add 0,1,0,0
* Add 0,0,1,0 to each Class selector (such as .class), each attribute selector (such as [attribute=]), and each pseudo-class (such as: hover)
* For each element selector (such as p) or pseudo-element selector (such as: firstchild), add 0,0,0,1
Then, add these four numbers separately to get the value of each CSS-defined priority.
Then compare the size bit by bit from left to right. The CSS style with the larger number will have higher priority.