CSS cascading rules

The special calculation of CSS rules

• Particularity
  The specificity of the selector is determined by the components of the selector itself. The specific value is expressed as 4 parts: 0,0,0,0.

  • For each ID attribute value given in the selector, add 0,1,0,0.
  • For each class attribute value given in the selection, the attribute is selected or pseudo-class, plus 0,0,1,0.
  • For each element and pseudo-element given in the selector, add 0,0,0,1.
  • Combined with wildcard selectors for specificity without any contribution

• Comparison rules
  Because values are sorted from left to right, all 1,0,0,0 are greater than all special values that begin with 0, regardless of the number of subsequent numbers. For example, the 0,0,1,0 ratio 0,0,0,13 higher.

• The particularity of the wildcard character is 0,0,0,0. No contribution to the particularity.

• The attribute selector special values for the ID selector and the id attribute are, 0,1,0,0, and 0,0,1,0. Therefore, the property selector for the id attribute is low.

• The particularity of the restrained statement for 1,0,0,0 is the highest.
  Reserving a bit for the introverted style declaration, which was added by CSS2.1, was done to reflect the performance of the Web browser that wrote CSS2.1 at the time. In CSS2, the specificity of an inline style declaration is 1,0,0 (the particularity contains 3 values, not 4). It is the same as the ID selector, so the ID selector can easily overwrite the inline style.

• !import importance
  Declarations marked as!important do not have special special values, but should be considered separately from non-important declarations. In fact, all!important statements are grouped together, and the particular conflict of important statements is resolved within the important statement rather than mixed with the non-critical statement. Similarly, we think that all non-important statements are grouped into one, using specificity to solve. If an important statement conflicts with a non-important statement, the winning is always an important statement.

• Inherited
  Most and model settings cannot be inherited. The value of inheritance has no particularity at all, even the 0 particularity. and 0 is more special than no special to strong.

  * {color：gray}h1#page-title {color:black;}
  

It inherits the color of H1, but because there is no particularity, it is defeated by the wildcard character of 0,0,0,0. Color is gray.
This example illustrates one of the possible problems with the use of a wildcard selector without distinction. Because it can match any element, the wildcard selector often has a short-circuit inheritance effect. This problem can be solved, but it is often more reasonable to avoid using the wildcard selector indiscriminately from the outset to avoid the problem at its root.
The inheritance system has no particularity at all, which is crucial and must not be underestimated. For example, set up a style sheet to write as follows so that all the text in the toolbar is black and white:

    #toolbar {color : white;background:black;}

This works as long as the element with ID toolbar contains only plain text and does not contain anything else. However, if the text of this element is a hyperlink, the user agent's hyperlink style will prevail. In a Web browser, this means that their color is likely to be blue, because the browser's style sheet might contain the following rules:

    a:link {color : blue;}

To overcome this problem, it must be stated as follows:

    #toolbar {color : white ; background : black;}    #toolbar a:link {color : white;}

• Cascade
  The two rule associates that are of a particular equivalence apply the cascading rules to the same element:

  • Find out all the relevant rules that contain selectors that match a given element.
  • Sorts all claims applied to the element by display weight. The rule weights that identify!important are high. Sorts all claims applied to a given element by source. There are 3 sources: creators, readers, and user agents. Under normal circumstances, the author's style is more than the reader's style. The reader style with the!important logo is stronger than all other styles, which contains the author style with the!important logo. Both the author style and the reader style are stronger than the default styles for user agents.
  • Sorts all declarations applied to a given element according to their specificity. The elements with higher specificity prevail.
  • Sorts all declarations applied to a given element in order of occurrence. A declaration appears later in a style sheet or document, and his weight is greater. If the style sheet has an imported style sheet, it is generally considered that the declaration appearing in the imported style sheet is in front of all declarations in the style sheet.

  Due to this sort of order, the usual recommended link style order. It is generally recommended to declare link styles in the Order of Link-visited-hover-active (LVHA).

• Non-CSS Presentation tips
  The document may contain non-CSS performance hints, such as a FONT element. Non-CSS hints are handled as special 0 and appear at the front of the authoring style sheet. This performance hint is overwritten as long as there is a creator or reader style, but the user-agent style cannot overwrite it.

CSS cascading rules