Detailed explanation of CSS structure and cascading

CSS is the abbreviation of Cascading Style Sheets, which implies that the concept of cascade is very important. At the most basic level, it shows that the order of CSS rules matters, but it's more complicated than that. Which selector wins in the cascade depends on three factors (these are in order of weight - an earlier one will override a later one):

• Importance (Importance)

• Specificity

• Source order

Importance

!important

In CSS, there is a special syntax that allows one rule to always take precedence over other rules: !important. Adding it after the property value makes the statement incredibly powerful.

Note: The only way to override this !important declaration is to include a declaration of the same !important attribute in later source code or in a source code with higher specificity.

It's useful to know that !important exists so that when you encounter it in someone else's code, you know what it is. but! We recommend that you never use it unless you absolutely must. One situation where you might have to use it is when you are working in a CMS where you cannot edit the core CSS modules and you really want to override a style that cannot be overridden in other ways. However, don't use it if you can avoid it. Because !important changes the way cascading works properly, debugging CSS issues, especially in large stylesheets, can become very difficult.

Style Sheet Source

It is important to note that the importance of a CSS declaration depends on what style sheet it is specified in - the user can set a custom style sheet to override the developer's style, e.g. You may be visually impaired and want to set the font size for all pages you visit to be double the normal size to make it easier to read.

Conflicting declarations will be applied in the following order, the latter will override the previous declaration:

• Declarations in the user agent stylesheet (For example: the browser's default style without other declarations).

• Ordinary declaration in the user style sheet (custom style set by the user).

• A normal declaration in the author stylesheet (this is the style we set, web developers).

• Important declarations in author style sheets

• Important declarations in user style sheets (highest priority)

It is reasonable for the web developer's stylesheet to override the user's stylesheet so the design can remain expected, but sometimes the user has a good reason to override the web developer style. As mentioned above, this can be done by Use !important in the user's rules.

Specificity

Specificity is basically a measure of how specific a selector is - how many elements it can match. As shown in the example shown above, element selectors have very low specificity. Class selectors are more specific and will beat element selectors. ID selectors have even higher specificity, so will beat class selectors.

The amount of specificity a selector has is measured using four different values ​​(or components), which can be thought of as thousands, hundreds, tens, and ones - in the four Four simple numbers in a column:

• Thousands place: Add 1 point to this column if the declaration is in a style attribute (such declarations have no selectors, so their specificity is always is 1000. ) otherwise 0.

• Hundreds: Add 1 point to the column for each ID selector included in the entire selector.

• Ten digits: Each time the entire selector contains a

  class selector, attribute selector, or pseudo-class Just add 1 point to this column.

• Ones digit: Add 1 point to the column for each

  element selector or pseudo-element contained in the entire selector.

Note: Universal selectors (*), compound selectors (+, >, ~, ' ') and negated pseudo-classes (:not) have no effect in specificity.

Example

SelectorThousands placeHundreds placeTen placesOnes digitTotal valueh100010001#important01000100h1 + p::first-letter0 0030003##li > a[href*="zh-CN"] > .inline-warning#important p > p > a:hover, in the

0	0	2	2	0022