7 CSS选择器优先级

  • 7 CSS选择器优先级已关闭评论
  • 88 次浏览
  • A+
所属分类:Web前端
摘要

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。


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>