What is a selector priority?

The MDN definition of priority is copied directly:

Browsers use precedence to determine which attribute values are most relevant to an element and apply those attribute values to that element. Priority is a matching rule based on different kinds of selectors.

This is also very abstract, but let’s leave it at that. But let’s start with an example:

  • HTML:
<div id="content" class="content""> < div style =" text-align: center;Copy the code
  • CSS:
#content {
    color: #f00;
}
.content {
     color: #0f0;
}
Copy the code

What color is the final text? The answer is simple: red. This is where the priority comes in. We used both the ID selector and the class selector on the same block, and because the ID selector has a higher priority than the class selector, it ends up in red.

Priority calculation rules

As anyone who has written CSS knows, the priority relationship of CSS selectors is:

Inline > ID Selector > Class Selector > Tag Selector.

But what is the browser specific priority algorithm? Maybe some of you don’t. The algorithm process is described in CSS REFACTORING.

A specificity is determined by plugging numbers into (a, b, c, d):

  1. If the styles are applied via the style attribute, a=1; otherwise, a=0.
  2. b is equal to the number of ID selectors present.
  3. c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
  4. d is equal to the number of type selectors and pseudoelements present.

The translation is

The priority is determined by the values of A, B, C, and D, where their values are calculated as follows:

  1. If there are inline styles, thenA = 1, otherwise,A = 0;
  2. BThe value is equal to theThe ID selectorThe number of occurrences;
  3. CThe value is equal to theClass selectors 和 Property selector 和 pseudo-classesThe total number of occurrences;
  4. DThe value is equal to theLabel selector 和 Pseudo elementsThe total number of occurrences.

This looks like it is very clear, so let’s take the last example:

#nav-global > ul > li > a.nav-link
Copy the code

Using the above algorithm, the values of A, B, C and D are calculated sequentially:

  1. Because there’s no inline style, soA = 0;
  2. ID selector appears a total of 1 times,B = 1;
  3. Class selector appears 1 time, property selector appears 0 times, pseudo-class selector appears 0 times, soC = (1 + 0 + 0) = 1;
  4. Label selector appears 3 times, pseudo-element appears 0 times, soD = (3 + 0) = 3;

The A, B, C, D calculated above can be abbreviated as :(0, 1, 1, 3).

To get familiar with the priority algorithm, let’s do some more exercises:

li /* (0, 0, 0, 1) */ ul li /* (0, 0, 0, 2) */ ul ol+li /* (0, 0, 0, 3) */ ul ol+li /* (0, 0, 0, 3) */ h1 + *[REL=up] /* (0, 0, 1, 1) */ ul ol li.red /* (0, 0, 1, 3) */ li.red.level /* (0, 0, 2, 1) * / a1, a2, a3, a4, a5, a6, a7, a8.. A9 a10. A11 / * (0, 0, 11, 0) * /#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
Copy the code

OK, so now you know what the priorities are. However, there is still a problem, how to compare the two priorities? The rule of comparison is: from left to right, the larger wins, if equal, continue to move one place to the right to compare. If all 4 bits are equal, the later bits will override the previous ones

Here’s another example:

  • html:
<div class="nav-list" id="nav-list">
	<div class="item">nav1</div>
	<div class="item">nav2</div>
</div>
Copy the code
  • CSS:
#nav-list .item {
	color: #f00;
}

.nav-list .item {
	color: #0f0;
}
Copy the code

Figure out the priority of # nav-list. item is (0, 1, 1, 0), and the priority of.nav-list. item is (0, 0, 2, 0). The first one on the left is 0, and the second one on the left is 0, so (0, 1, 1, 0) is greater than (0, 0, 2, 0), so # nava-list. item is greater than.nav-list. item, so the font will be red.

Special case of priority

From the priority calculation rule above, we know that inline styles have the highest priority, but is there any way that external styles can override inline styles? Yes, yes! Important is coming. Because in general, inline styles are rarely used, so! Important is rarely used! If you don’t want to overwrite inline styles, don’t use them! Important. ,

So some people might think, well, what if I use inline style! Important, is there no way to use external styles? For example, the following code:

  • HTML:
<div class="app" style="color:#f00! important">666</div>
Copy the code
  • CSS:
.app { color: 0f0! important; }Copy the code

Yes, you win, and the inline style is so powerful that no matter what you do with the external style, it can’t be overridden. This situation should be avoided in actual code! Remember, never use it in an inline style! important

In the end,! Is it true that you are the unsurpassed king? Actually not, some cases, we can transcend! Important, look at the following example:

  • html:
<div class="box" style="background: #f00; width: 300px! important;"< p style = "margin-top: 0px; margin-bottom: 0px; margin-bottom: 0px; <div>Copy the code
  • css:
.box {
	max-width: 100px;
}
Copy the code

< span style = “box-sizing: border-box; width: 100px; important! However, this is not really a priority issue, because priority compares the same property, whereas max-width and width are two different properties. < span style = “box-sizing: border-box; color: RGB (255, 255, 255); line-height: 22px; font-size: 16px! Important; word-break: none;”

OK, the priority first wrote here, friends have questions welcome to comment discussion ~