What are the weight and priority rules of the CSS selector ?, Css selector priority

What are the weight and priority rules of the CSS selector ?, Css selector priority

During project creation, we often encounter style cascade issues, which are covered by other styles, or the write weight is not very effective, so we have no specific analysis on the weight and made a summary.

Css inheritance is a mechanism used to pass attribute values from an element to its child element. When determining which values should be applied to an element, the browser should consider not only inheritance, but also the particularity of declaration, and also the source of declaration. This process is called cascade. -- Css authoritative guide

For example, a css rule consists of a selector and a declaration block. A declaration is written in the braces behind the selector.

I. Style Type
1. Lines

<H1 style = "font-size: 12px; color: #000;"> my CSS styles. </H1>

2. inline

<style type="text/css">   h1{font-size:12px; color:#000;}</style>

3. External

<link rel="stylesheet" href="css/style.css">

Example summary html:

<! DOCTYPE html> 
Style1.css
a {color:blue;}
Style2.css
a {color:green;}
Description of different situations: a style is set for each of the four cases to check the priority;
1. When there are only two external styles: style2.css> style1.css
Green:
If the style is the same, the style sheet is executed from top down.
2. When there is external and inline
Green:
It indicates that the style sheet is executed from top to bottom when the style is the same.
Note: We often have the illusion that inline is greater than external. Therefore, we often add internal content to external content to overwrite external content.
3. When there is an external, inline, or line:
Display: Yellow
Note: The line weight is the highest.
 
Ii. selector type
1. ID # id
2. class. class
3. Tag p
4. General *
5. Attribute [type = "text"]
6. pseudo class: hover
7. pseudo element: first-line
8. Child selector and adjacent Selector
Iii. weight calculation rules
First, this parameter indicates the inline style, for example, style = ". The weight is 1000.
Second: ID selector, for example, # content. The weight is 0100.
Third: indicates the class, pseudo class, and attribute selector, such as. content,: hover, [type = "text"]. The weight is 0010.
Fourth, it indicates the tag selector and pseudo element selector, for example, p,: first-line. The weight is 0001.
Wildcard, sub-selector, and adjacent selector. For example, *,>, and +. The weight is 0000.
The inherited style has no weight. The rule defined by the wildcard selector has a higher priority than the rule inherited by the element.
The last special sign! Important (weight) has no special value, but its priority is the highest. For convenience of memory, it can be considered that its special value is, 0.
For example, the special characteristics of selector in the following rules are:
1>/* Special: 1000 */2 # demo a {color: orange;}/* Special: 100 + 1 = 101 */3 div # demo a {color: red;}/* Special: 1 + 100 + 1 = 102 */4. demo a {color: black;}/* Special: 10 + 1 = 11 */5 div a {color: green;}/* special: 1 + 1 = 2 */6. demo input [type = "text"] {color: blue;}/* Special: 10 + 1 + 10 = 21 */7. demo * [type = "text"] {color: gray;}/* Special: 10 + 0 + 10 = 20 */
Abnormal Situation: Xin Dashen's example: 256 class name selector kills an id selector instance page
Http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html
Iv. Comparison rules
,>, 99. That is to say, the comparison is performed from left to right one by one, and the comparison is performed only when the previous level is equal.
Both the inter-line, internal, and external styles are compared according to this rule. Instead of an intuitive line> internal> external style; ID> class> element.
When the weights are the same, the subsequent style overwrites the previous one.
Wildcard, sub-selector, and adjacent selector. Although the weight is 0000, it takes precedence over the inherited style.
V. Instances
<! DOCTYPE html> 
Display: