In the impression of CSS selector weight calculation rules are very simple, no special place, today free to read a few blogs, found that with what I think there is actually not the same, so record to tidy up.
conclusion
First the conclusion:
PS: The picture is spelled pseudo-classes
The weight calculation includes four parts: A, B, C and D. The official documentation
- Is there any at position A
style=" "So inline, if you have the weights you get 1,0,0,0 - The b position represents the number of ID attributes in the selector. If there is an ID selector, the weight is 0,1,0,0
- The c bit represents the number of class selectors, attribute selectors, and pseudo-class selectors. For example, a class selector weights 0,0,1,0
- Element selectors (including pseudo-element selectors such as
:first-line) the weights are 0,0,0,1
The sequence of comparison is to compare the digits in position A first, and the style with larger digits in position A takes effect. If the digits in position A are the same, compare the digits in position B, and the larger digits in position B will take effect. If the numbers in position B are the same, compare the numbers in position C, in turn.
(*) wildcard selector (universal selector) relationship selector (combinators) (+ >, ~ ‘, | |) and negative pseudo-classes (negation pseudo – class) (: the not ()) has no effect on priority (but, Selector declared inside ****:not() affects priority).
Example:
<style>
.favorite {
color: red;
font-weight: bold;
}
li#fa-one{
color: yellow
}
#summer-drinks li{
color: blue;
}
</style>
<ul id="summer-drinks">
<li class="favorite" id="fa-one" style="color: green;">Whiskey and Ginger Ale</li>
<li>Wheat Beer</li>
<li>Mint Julip</li>
</ul>
Copy the codeStyle =” #summer-drinks “style=” #summer-drinks” style=” #summer-drinks “style=” #summer-drinks” style=” #summer-drinks
Style a position is 1, all other writing is 0, so style=”
#summer-drinks li and li#fa-one = #summer-drinks li and Li #fa-one = #summer-drinks li and Li #fa-one = #summer-drinks li and Li #fa-one = #summer-drinks li Since the weights are the same, the ones further down will override the previous ones.
Here’s another example:
<style>
a[title]{
color: red
}
a:hover{
color: green;
}
.testA{
color: purple;
}
</style>
<ul>
<li><a title="w3c" class="testA">W3C</a></li>
<li><a>Medium</a></li>
</ul>
Copy the codeTestA is a class selector with a weight of 0,0,1,0, so the W3VC tag is red
a:hoverIs the pseudo-class selector + element selector, the weight calculation value is also: 0,0,1,1, anda[title]It’s the same thing, but,a:hoverThe definition is further back, soa:hoverHover style is enabled when hover.
More examples:
❌ 1000, 100, 10, 1 Misunderstanding
“Style =” 1,0,0,0; The ID selector 0,1,0,0 evaluates the comparison as 100. See above for the correct comparison method. It’s by rank, the numbers in each position are compared separately.
An example:
Body header div nav ul Li div pa span em {color: red}
.count {color: blue}
According to the wrong calculation, style 1 has a weight of 11 and style 2 has a weight of 10. If these two rules apply to the same element, the element should be red. The actual result is blue.
The correct calculations are: 0,0,0,11 and 0,0,1,0. Starting with the first a, the a and B bits are 0; Comparing the C bits, style 2 is 1 greater than style 1, so style 2 is in effect.
about! important
! Important has the highest priority and does not participate in the above weight calculation. If both selectors are used together! Important, then the weights will be calculated according to the above rules to determine which style is effective.
Best not to use! Important, especially when we are writing third-party component libraries.
If you want to cover! Important style, can be added to style! Important and the weight calculation result is larger than the previous; Or it could be the same as the previous one but it should be declared later so that it overwrites the previous one! Important style.
Css-tricks.com/specifics-o… Juejin. Cn/post / 684490… Chenhaizhou. Making. IO / 2015/01/16 /…