This is the 7th day of my participation in the August More Text Challenge

In this blog post, I want to talk about CSS selector priorities. Although this is an “old topic”, I have found something new in my recent research. In line with the principle that a good memory is better than a bad pen, I have decided to put it into writing and share it with you. I hope it will be helpful to you as you read this article

Explain the priority of the CSS selector

When multiple CSS selectors are applied to the same attribute of the same element, the browser determines which selector will ultimately be applied to the element based on its priority, thus displaying the style defined under the corresponding selector on that element

The weight of the priority of the selector is determined by the sum of the weight values corresponding to each of the sub-selectors, which are as follows

  • If you declare an attribute in style (inline style), the weight is +1000
  • If the selector contains an ID selector, the weight value is +100
  • If a selector contains a class selector, an attribute selector, or a pseudo-class selector, the weight value is +10
  • If the selector contains an element selector and a pseudo-element selector, the weight value is +1

Note: Wildcard selectors (*) and relational selectors (+, >, ~) do not participate in the calculation of weight values

If two selectors with the same weight are applied to the same place, the later selector will be applied to the element. This is called “coming from behind”.

Let’s talk about the guy who flouts the rules above:! important

The guy with one hand over the sky 👉! important

Important this is very ðŸŪ, it can override any other declaration, although technically,! Important has nothing to do with priority, but it is directly related to the final result, so it can be assumed to have a weight value of 10000 (higher than the inline ðŸĪŠ anyway) when two selectors acting on the same attribute of the same element both have! When important, selectors with higher weights will be used (i.e. ignored! After important, sum of weight values of the remaining selectors)

Just because it’s so powerful, we have to be careful when using it. Here are some lessons we’ve learned

  • Always prioritize using style rule priorities to solve problems rather than! important
  • Use only on specific pages where you need to override site-wide or external CSS! important
  • Never use it in your plugin! important
  • Never use it in site-wide CSS code! important

You may already know the above, so let’s talk about some things you may not know 😏

【 Layer 】

In fact, the priority mentioned above is only in the page author defined the style of this dimension to judge, but CSS is the existence of the concept of cascading, that is to say, there are many dimensions, so the above judgment is problematic, what is the right way? Go on to 😉

Cascading is a fundamental feature of CSS. It is an algorithm that defines how to combine property values from multiple sources. It is at the heart of CSS and is highlighted by the full name CASCADING style sheet. There are five style sources in CSS. They are:

  • The browser will have a basic style sheet to set the default style for any web page. Collectively, these styles are user agent styles
  • The author of a web page can define the style of the document, which is the most common style sheet. In most cases, this type of style sheet will define more than one, which makes up the look and feel of the site, the page theme, which can be understood as the page author style
  • As a user of the browser, you can customize the experience using a custom style sheet, which can be understood as a user style
  • Animation refers to the use of the @keyframes rule to define the Animation between states. The style of the Keyframes in the Animation sequence is defined to control the CSS Animation sequence
  • Transition

Styles from all of these sources are grouped into different Cascading dimensions, and according to the latest standard for CSS Cascading 4, the Cascading order currently has the following priority (the lower the Cascading order the higher the priority) :

  • Normal user agent declarations
  • Normal user declarations
  • Normal author declarations
  • Animation declarations
  • Important author declarations
  • Important user declarations
  • Important user agent declarations
  • Transition declarations

translation

This is only a standard specification, because each browser vendor will have their own implementation, so different browsers or even different versions of the same browser will have some differences, so you need to explore the actual line, the so-called practice is the only criterion to test the truth

Through the interpretation of this section, we know that in the first quarter selector is discussed in the priority problem, in fact are all styles is the precondition of page style of the author to explore, obviously this is a problem, so if you want to judge a certain element finally show style, in addition to need more style priority, You also need to compare the priority of the cascading dimensions in which the styles reside, and the cascading order should take precedence (the selector’s priority should be determined only if the cascading dimensions have equal priority).

conclusion

In fact, sometimes to re-dig some “old things” or pretty interesting, one is to consolidate known knowledge, two is to be lucky to discover some new things, so as to expand their knowledge, I think this is often said that people review the old to know the new ðŸĪŠ

reference

Cascading in CSS (Cascading Style Sheets)

A little request

Since you see here, if you like my article, so please move your finger, help me to like or collect my article, XDM support is the biggest power of my creation, my own computer is not fun!

Recently, I set up a personal blog, which will publish my article first. I hope that interested partners can browse, if you can comment and leave a message, it will be better. I am looking forward to your visit

Recommended reading

Have you heard of motion Path for CSS?

ðŸ‘ī : Using CSS to draw triangles

It’s time to polish the front end of Babel 🊓

It’s time to get to know AST, a familiar but strange friend

A tour of the clip-path property 🧐

[Suggested collection] Take you hand in hand to explore the mystery of data encryption 😉~ | More challenges in August

All that stuff about web screenshots

How to deploy and manage Node applications using PM2

Docker + Jenkins + Githook builds an automated build release process

Introduction to Vue3