Recently I saw a blog with a better explanation of CSS priority. Although there are related articles on the Internet, I still reposted it for your reference.
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 following is a quote: [Reprinted from GOVO's Blog]
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.
Example Source Code
[www.downcodes.com] selector( a , b , c , d )
compare: ↑ , ↑ , ↑ , ↑
selector( a , b , c , d ), as shown in the original text in w3c.org, is divided into four groups a, b, c, d, all are positive integers, and the default is 0, corresponding to different selector structures and compositions form. When comparing the priorities between selectors, compare one to one from left to right. When the comparison is greater, the comparison can be stopped.
Example Source Code
[www.downcodes.com] 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 result has 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 W3Cbbs.com to discuss!
Here’s an example: 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:
Example Source Code
[www.downcodes.com] * 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), etc., 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.
example:
css file or <style> defined as follows:
Example Source Code
[www.downcodes.com] 1. h1 {color: red;}
/* An element selector, the result is 0,0,0,1 */
2. body h1 {color: green;}
/* Two element selectors, the result is 0,0,0,2 */
3. h2.grape {color: purple;}
/* An element selector and a Class selector, the result is 0,0,1,1*/
4. li#answer {color: navy;}
/* An element selector, an ID selector, the result is 0,1,0,1 */
The style attribute of the element is defined as follows:
Example Source Code
[www.downcodes.com] h1 {color: blue;}
/* Defined in the page, an element selector, the result is 1,0,0,1*/
Note: All numbers are superimposed here, (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1,0,0,1)=(1,1,1,6)
Since then, the color of the h1 element is blue.
Notice:
1. The style declared by !important has the highest priority. If there is a conflict, it will be calculated again.
2. If the priorities are the same, select the style that appears last.
3. The inherited style has the lowest priority.
