# 如何计算 CSS 选择器的权重

关于答案解析

有关 CSS 中选择器权重计算相关的面试题答案解析过程是根据自身项目实践以及查阅官方文档等最终的得出结论。
仅供学习参考，评论区感谢补充和纠错！

# 1、层叠性

重新认识 CSS

CSS 全名叫 层叠式样式表 ，层叠性是它很重要的性质
层叠性：多个选择器可以同时作用于同一个标签，效果叠加

<style>
  div {
    width: 300px;
    height: 100px;
  }
  .para {
    color: aliceblue;
    background-color: skyblue;
  }
  #desc {
    background-color: green;
  }
</style>
<body>
  <h2>层叠性</h2>
  <div class="para" id="desc">我是一个div</div>
</body>

# 2、层叠性的冲突处理

冲突问题

多个选择器定义同一元素的冲突问题
CSS 有严密的处理冲突的规则

id 权重 > class 权重 > 标签权重

<style>
  /* id 权重 > class权重 > 标签权重 */
  p {
    color: red;
  }
  #arry {
    color: skyblue;
  }
  .me {
    color: green;
  }
</style>
<body>
  <h2>层叠性的冲突处理</h2>
  <p class="me" id="arry">我是一个段落标签</p>
</body>

# 3、复杂选择器权重计算

权重计算

复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重。具体实践如下：

<style>
  /* id 权重 > class权重 > 标签权重 */

  /* （2,0,1）权重 */
  #box1 #box2 p {
    color: red;
  }
  /* （2,1,2）权重 三个中，此复合样式权重最高，生效*/
  #box1 div.box2 #box3 p {
    color: green;
  }
  /* （0,3,1）权重 */
  .box1 .box2 .box3 p {
    color: blue;
  }
</style>
<body>
  <h2>复杂选择器权重计算</h2>
  <div class="box1" id="box1">
    <div class="box2" id="box2">
      <div class="box3" id="box3">
        <p>我是一个段落标签</p>
      </div>
    </div>
  </div>
</body>

# 4、!important 提升权重

TIP

如果我们需要将某个选择器的某条属性提升权重，可以在属性后边写上 !important
当然，很多企业中不允许使用 !important ，因为这会带来不经意的样式冲突

<style>
  /* 权重 （0,1,2） */
  .list ul li {
    color: red;
  }

  /* 权重（0,1,0） */
  /* !important 提升权重，生效 */
  .desc {
    color: skyblue !important;
  }
</style>
<body>
  <h2>提升权重</h2>
  <div class="list">
    <ul>
      <li>我是列表项</li>
      <li class="desc">我是列表项</li>
      <li>我是列表项</li>
      <li>我是列表项</li>
      <li>我是列表项</li>
    </ul>
  </div>
</body>

← BFC 的理解和最佳实践

大厂最新技术学习分享群

微信扫一扫进群，获取资料