particularity

As we know from the CSS selector article, there are many different ways to select elements. So when we use multiple rules, we have to make sure that they are prioritized. But in the CSS selector rules, called particularity, the higher the specificity, the higher the natural priority. At this point we first get a specificity statement:

  • ! Important has the highest particularity and the importance of detailed access
  • For inline styles, add 1000
  • For the ID attribute value given in the selector, add 0100
  • For a given class attribute value, attribute selection or pseudo-class in the selector, add 0010
  • For the element selector and pseudoelement given in the selector, add 0001.
  • Combinators and wildcard selectors contribute nothing to particularity, 0000


Exclude pseudo-elements from other selector priorities

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #ID-selector {
        font-size: 10px;
      }

      .class-selector {
        font-size: 12px;
      }

      *[proprty-selector] {
        font-size: 14px;
      }

      *:first-child {
        font-size: 16px;
      }

      div {
        font-size: 18px;
      }

      * div {
        font-size: 20px; {} *font-size: 24px;
      }
    </style>

  </head>

  <body>
    <div style="font-size: 6px;" proprty-selector="true" id="ID-selector" class="class-selector">
      test css selector priority
    </div>

  </body>
</html>
Copy the code

The selector here filters out two groups to view:

Classes, properties, pseudo classes

      .class-selector {
        font-size: 12px;
      }

      *[proprty-selector] {
        font-size: 14px;
      }

      *:first-child {
        font-size: 16px;
      }
Copy the code

Element, relation

      div {
        font-size: 18px;
      }

      * div {
        font-size: 20px;
      }
Copy the code



View the page rendering CSS application result



As shown in the figure, properties are written in the following order: Class, Property, Pseudo Class The CSS is applied in the following order: Pseudo class, Property, Class

Properties are written in: element, relationship CSS is applied in: Relationship, element


conclusion

Make two points clear:

  • When the selector is of the same particularity, the style at the bottom of the CSS file overrides the style above.
  • Wildcard selectors don’t contribute anything to particularity, so I use wildcards instead of div attributes (a strong argument for not using too many wildcards in daily development, just for example) because I want to eliminate the particularity effects of div itself.

CSS selector priority

ID > Class = Attribute = pseudo class > Element = Relationship > wildcard


Pseudo-element differences

Pseudo-elements have high priority?

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #ID-selector {
        font-size: 10px;
      }

      .class-selector {
        font-size: 12px;
      }

      div {
        font-size: 18px;
      }

      *::first-letter {
        font-size: 22px; {} *font-size: 24px;
      }
    </style>

  </head>

  <body>
    <div style="font-size: 6px;" proprty-selector="true" id="ID-selector" class="class-selector">
      test css selector priority
    </div>

  </body>
</html>
Copy the code



You can see that the red box above has a pseudo-element style applied at the end. It looks as ifPseudo-elements have a high priorityAh, even higher priority than inline styles.



The pseudo-element priority is the same level as the element

This needs to be tested using Internet Explorer:

#ID-selector {
	font-size: 10px;
}

.class-selector {
	font-size: 12px;
}

*[proprty-selector] {
	font-size: 14px;
}

*:first-child {
	font-size: 16px;
}

div {
	font-size: 18px;
}

* div {
	font-size: 20px;
}

*::first-line {
	font-size: 22px; {} *font-size: 24px;
}

Copy the code





The pseudo-element has the same priority as the element, and the relation has the same priority.


Conclusion:

ID > Class = Attribute = pseudo class > Element = Relation = pseudo element > wildcard


What makes pseudo-elements special

Why does this happen?

www.w3.org/TR/selector… Document languages do not offer mechanisms to access the first letter or first line of an element’s content, but there exist pseudo-elements (::first-letter and ::first-line) that allow those things to be styled.

The document syntax does not provide a mechanism to directly access the pseudo-element first letter or first line. But there do exist pseudo-elements to apply styles. Pseudo-elements don’t work with the selectors in the CSS rules: they work with the pseudo-elements themselves created from the rules



It may not be appropriate to compare the priority of the pseudo-element with that of the others. After all, you have different elements. The other elements are elements in the document, while the pseudo-element applies to pseudo-elements that do not exist in the document.