- A+
所属分类：Web前端
7 选择器优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。
/* !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 1 内联样式表的权值最高 style="" 1000； 2 统计选择符中的ID属性个数。 #id 100 3 统计选择符中的CLASS属性个数。 .class 10 4 统计选择符中的HTML标签名个数。 标签名 1 按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。 */ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器的优先级</title> </head> <style> /* 行内选择器:1000 id:100 class:10 标签名:1 !important */ /*#i1{*/ /* color: red;*/ /*}*/ /*.c1{*/ /* color: gold;*/ /*}*/ /*div{*/ /* color: blue;*/ /*}*/ /*.c2 .c3 .c5{*/ /* color: red;*/ /*}*/ /* #i2{*/ /* color: rebeccapurple;*/ /* }*/ /*.c2 .c4 div{*/ /* color: green;*/ /*}*/ /*.c2 .c3 .c4 div{*/ /* color: lightcoral;*/ /*}*/ /*.c2 .c4 .c5{*/ /* color: lightskyblue;*/ /*}*/ /*.c5{*/ /* color: chartreuse!important;*/ /* }*/ </style> <body> <div id="i1" class="c1">alvin</div> <div class="c2"> <div class="c3"> <div class="c4"> <div class="c5" id="i2" style="color: orange">item</div> </div> </div> </div> </body> </html> 
