CSS style selector precedence

Original: CSS style selector precedence

CSS style selectors are divided into 4 levels, A, B, C, D, which can be used to determine the precedence of CSS selectors based on these four levels.


1. If the style is in-line style (defined by style= ""), then a=1
2.B is the total number of ID selectors
3.C is the number of class selectors.
4.D is the number of type selectors
5. Property selectors, pseudo-class selectors and class selector precedence, pseudo-element selectors and type selectors
6.!important has the highest weight, higher than the inline style.

For example:

Selector Selector	Particularity (A,B,C,D)
Style= ""	1,0,0,0
#wrapper #content {}	0,2,0,0
#content. dateposted {}	0,1,1,0
Div#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
P.comment. dateposted {}	0,0,2,1
Div.comment p {}	0,0,1,2
. Comment P {}	0,0,1,1
P.comment {}	0,0,1,1
. Comment {}	0,0,1,0
div p {}	0,0,0,2
P {}	0,0,0,1

CSS priority reading  

Here, first correct some of the wrong readings. Baidu search through the content, usually appear this way: (1,0,0,0), but some articles on its interpretation is not comprehensive, and some even wrong.

One of the biggest errors is to add the result: (1,0,0,0) = 1000, (0,0,2,2) = 22, and more: (0,1,0,1) =0+1+0+1=2! While these understandings seem to be correct in very simple cases, they are essentially a major mistake.

There are also some articles that understand it as 4 levels, similar, but not clear and difficult to understand.

     CSS Precedence contains four levels (in-context selectors, ID selectors, class selectors, element selectors), and the number of occurrences of each level. The CSS priority "level is calculated based on the number of occurrences of these four levels.

This sentence summed up very well, but for beginners, in terms of understanding is a bit difficult, "four levels", too easy to confuse, in fact, should be "four groups of levels."

I think that the priority reading should be "group", the group is independent, from left to right to compare. They appear as groups, separated by commas.

  selector (A, B, C, D)
   compare:↑,↑,↑,↑
  selector (A, B, C, D)  

as shown in the central plains of w3c.org, divided into a,b,c,d four groups, all is a positive whole Lou, the default is 0, corresponding to the different selector structure and composition form. When you compare the priority between selectors, from left to right 1 vs. 1, you can stop comparing when there is a large one.

Li.red.level {}

H1 + *[rel=up]{}

UL ol li.red {}

#x34y {}

(in the table above, ↑ indicates a comparison, √ indicates that the result has been obtained from this point)

Again, as long as the correct writing, only from the priority to know about the selector structure, such as:

1,0,0,0 represents the style within the element;

0,2,1,1 represents a selector consisting of two ID selectors, 1 classes or pseudo-class or property selectors, and an element selector.

details of CSS precedence rules:

After correcting the reading method, the detailed rules can be started:

* Group A values will only be 1 if the CSS is written into the style property, otherwise 0. The style declaration written into style is not really a selector, so the B,c,d group value is 0, and only the real selector will have the B,c,d group value.
* The value of Group B is determined by the ID selector #id, the number of ID selectors, and this group of values will be accumulated;
* The value of Group C is determined by class, pseudo class and attribute selector, and the value of the group is accumulated.
* The value of the D group is determined by the element name, which is the element selector, and the value of the group is incremented;

Note that these four sets of values correspond to different types of selectors, which do not affect each other and are compared according to the law of reading.


Recently in the writing of CSS, because often used to a very long multilevel selector, and encountered some styles are covered or not covered by the situation is quite depressed, so dedicated to spend some time on some selectors to do a comparison test. Here first, since IE6 does not support the css2.0 selector, these tests omit some 2.0 selectors and connectors, such as Pseudo-class (: hover), attributes ([type= "text"]), sub-selectors (>), etc., only for #id,.class, Tag and space connector test.

　　 definition:

1. CSS sentence: A complete selector forms a CSS sentence, such as. ABB #cd Div.class. A comma-concatenated ellipsis definition method that counts as multiple sentences.
2. CSS Word: Any #id or. class or tag in a CSS sentence counts as a CSS word, although it is generally understood that tag# Id.class1.class2 the whole as a word, but within the scope of this article, this can only be counted as a phrase consisting of 4 words.
3. Priority: For the selection of two CSS sentences to the same element, when they define the same attribute of the element, if one of them is written in front of it and is not written in the subsequent overwrite of this property, then it is called the CSS sentence priority is higher than the other. The two CSS sentences have the same precedence when the 2 CSS sentences are swapped in the code, and the positions are later overwritten with the previous attributes.

Testing with DOM:

1. <body id= "Body" class= "body" >  
   <div id= "div" >  
       <div id= "test1" class= "Test Test1" >1 first row <br> second row <br> self </div>  
       <div id= "test2" class= "Test Test2" >2 first row <br> second row <br> self </div>  
       <div id= "test3" class= "Test Test3" >3 first row <br> second row <br> self </div>  
       <div id= "test4" class= "Test Test4" >4 first row <br> second row <br> self </div>  
       <div id= "Test5" class= "Test Test5" >5 first row <br> second row <br> self </div>  
       <div id= "Test6" class= "Test Test6" >6 first row <br> second row <br> self </div>  
       <div id= "test7" class= "Test Test7" >7 first row <br> second row <br> self </div>  
       <div id= "Test8" class= "Test Test8" >8 first row <br> second row <br> self </div>  
   </div>  
   </body>  
   
   
   

   Here first give 8 groups of selectors, each group of two, you can first think of each group in which the priority of the selector is high:

   1. <style>  
        
      #test1 {height:2em;}  
      . Test1{height:1em;}  
         
        
      . body #test2 {height:1em;}  
      #test2 {height:2em;}  
         
        
      Div. test3{height:2em;}  
      #test3 {height:1em;}  
         
        
      . body #test4 {height:2em;}  
      Body #test4 {height:1em;}  
      
      
      

      HTML #test5 {height:2em;}
      Body #test5 {height:1em;}
         
        
      #body #test6 {height:1em;}
      . html #test6 {height:2em;}
         
        
      HTML #body #test7 {height:1em;}
      . html. Body #test7 {height:2em;}
         
        
      #html. html. Body #test8 {height:1em;}
      . html #body. Body #test8 {height:2em;}
      </style>
      
      Now announce the answer:
      
      1. Only one selector word #id higher than. Class should be needless to say;
      2. Div#test2 more than #test2 a word, so more than one word priority, here can be temporarily understood as more than one word on the choice of more accurate;
      3. One more word, but one has #id choice, then #test3 is higher than Div. test3;
      4. Body #test4高于body #test4, can be understood as the same multilayer level,. Class is higher than tag;
      5. The HTML #test5与body #test5有同样的优先级, the first written will be overwritten, here to guess the same number of levels, the priority is independent of the depth of the hierarchy span;
      6. #body #test6高于. html #test6, understood as #id better than. Class is also independent of the level depth;
      7. The last two comparisons are difficult, but the results under the browser are HTML #body #test7高于. html. Body #test7, how to understand I do not say first;
      8. #html. html. Body #test8与. html #body. Body #test8同级.
      
      In fact, the more to the back, should be able to see a vague rules. After my repeated analysis, I finally found the mystery in the vague sense, or a kind of explanation:
      
      The word composition of the CSS sentence is defined as "digital", like a 1000-digit number, the CSS in different words represent different weights, respectively, the #id,.class,tag three digits from high to low in order to form the equivalent of decimal digits of the hundred, 10 bits, bits. Then the number of each of the various words in the CSS sentence into the newly divided digits, you can get a similar to the decimal number of three digits, just in the precedence of the CSS, no carry concept, countless low-level words are still lower than a high word. So the conclusion is, according to #id,.class,tag statistics of the number of words in the CSS and after the number of digits, as long as the comparison of the size of two CSS numbers (from high to low in order to compare), you can draw two CSS priority.
      
      Use this rule to compare the previous example again:
      
      1.1,0,0>0,1,0
      2.1,1,0>1,0,0
      3.0,1,1<1,0,0
      4.1,1,0>1,0,1
      5.1,0,1=1,0,1
      6.2,0,0>1,1,0
      7.2,0,1>1,2,0
      8.2,2,0=2,2,0
      
      It is easy to compare the priority of the last two sets of examples with this method, and to make a reasonable explanation for some of the foregoing cases, so this method is very convenient and easy to understand before there is no better way to interpret the CSS selector.
      
      

CSS style selector precedence