CSS Selector weight value calculation rule

First, Style type

1. Between rows

　　2. Inline
<style type= "Text/css" >   h1{font-size:12px;      Color: #000;      } </style>  
 3. External
<link rel= "stylesheet" href= "Css/style.css" >
Second, selector type
　　1. ID #id
　　2, Class. class
　　3. Label P
4. General *
5. Properties [type= "text"]
6, Pseudo-class: hover
7, Pseudo-element:: First-line
8, sub-selectors, adjacent selectors
Third, the weight calculation rules

 
 

  
  
 
   
First: Represents the inline style, such as: style= "", the weight value is 1000.
 
   
Second: Represents the ID selector, such as: #content, the weight value is 0100.
 
   
Third class: Represents classes, pseudo-classes, and attribute selectors, such as. Content, with a weight of 0010.
 
   
Class IV: Represents a type selector and a pseudo-element selector, such as Div p, with a weight of 0001.
 
   
Wildcard characters, sub-selectors, adjacent selectors, and so on. such as *, >, +, the weight value is 0000.
 
   
Inherited styles do not have a weighted value.
 
  
 
 
Iv. Rules of comparison

 
 

  
  
 
   
1,0,0,0 > 0,99,99,99. That is to say, from left to right, rank by level, the previous level is equal to the backward ratio.
 
   
Both inline, internal, and external styles are compared by this rule. Instead of intuitive inline > Internal > External style;id>class> elements. The reason for this illusion is that the weight of the row is the first, so its weight is the highest. The internal style may be generally written after the external style reference, so overwrite the previous.
 
   
In the case of the same weight, the following style overrides the previous style.
 
   
Wildcard characters, sub-selectors, adjacent selectors, and so on. Although the weight value is 0000, it takes precedence over the inherited style.
 
  
 
 
Five! Important

 
 

  
  

  
   !important's role is to elevate the priority, in other words. The style with this sentence has the highest priority (higher precedence than inline style).       
 <style> p{color:red!important; }</style><p style= "Color:blue;" > I show red </p>   
 
  
  

  
   ie7+ and other browsers have a good support for this effect on important. Only IE6 some bugs       
 p{color:red!important;    Color:blue; }//    
 
 However, this does not mean that IE6 does not support important, only some bugs are supported. Look below 
   
 p{color:red!important;  }p{Color:blue; }// This shows red. Note that IE6 still supports important.     
   
 
 
Vi. examples

 
 

  
  
A{color:yellow;}/*Special value: 0,0,0,1*/Div A{color:green;}/*Special value: 0,0,0,2*/. demo A{color:black;}/*Special value: 0,0,1,1*/. Demo input[type= "text"]{color:blue;}/**//**/< Span style= "color: #000000;" > #demo A{color:orange;} /**/< Span style= "color: #000000;" > Div#demo a{color:red;} /**/< A href= "" > First should be yellow </a> <!--applicable 1th line rule--><div class= "demo" > <input type= "text" value= "the second bar should be blue"/ ><!--Apply 4th, 5 line rules, line 4th priority High--<a href= "" > Third should be black </a><!--applicable to 2nd, 3 row rules, 3rd row priority High--></div> <div id= "Demo" > <a href= "" "> Fourth should be red </a><!--applicable 5th, 6 row rules, 6th line priority high--></div>   
 
 
 CSS Selector weight value calculation rules