CSS selector priority

This article mainly introduces the content related to the CSS selector priority to the coders. It analyzes and compares the CSS selector priority using eight small examples. For more information about the coders, see. This article will share with you the introduction of CSS selector priority for your reference. The specific content is as follows:

1. There is no relationship between the class overwrite sequence and the reference sequence during the application. The overwrite sequence depends on the class-defined sequence.

For example:

.a{       color:red  }   .b{       color:green  }  

Because B is later than a, B overwrites a. Otherwise, a overwrites B.

2. The class selector has a higher priority than the label selector.

For example:

p{       color:red  }   .p{       color:green  }   

. P will overwrite p

3. The priority of a class selector is equal to that of a pure property selector.

For example:

[data-name='p']{        color: red     }    .a{         color:blue     }   

. A will overwrite [data-name = 'P'], and vice versa [data-name = 'P'] will overwrite.

4. The priority of the class selector is smaller than that of the tag + Attribute combination selector.

For example:

p[data-name='p']{        color: red     }    .a{         color:blue     }   

5. The priority of the class selector is smaller than that of the id selector.

For example:

.a{        color:blue     }     #p{         color: red     }   

. A will be overwritten by # p

6. The priority of the tag + Attribute combination selector is smaller than that of the id selector.

For example:

[data-name='p']{         color:blue   }    #p{         color: red  }  

# P will overwrite [data-name = 'P']

7. The priority of the tag selector is smaller than that of the id selector.

For example:

p{         color:blue   }     #p{        color: red     } 

# P will overwrite p

8. The priority of the tag selector is smaller than that of the pure attribute selector.

For example:

p{         color:blue     }   [data-name='p']{         color: red     }   

P will be overwritten by [data-name = 'P ']

To sum up: Tag Selector <类选择器=纯属性选择器（先定义会被覆盖）<标签+属性组合选择器 .

For more information about selector, see the css selector chapter in the css manual.