三分钟搞懂CSS 权重

切图时是不是经常性的写了样式无效呢？ 半死不得其解吧

为什么自己的样式老是被抵掉了呢？ 为什么老是用important 来搞事呢？

我猜应该是CSS权重问题，没有理解透彻吧

下来用几个例子说明下CSS的权重。

<p class='p2' id="p2"> daasd  </p>
复制代码

p {
  color: red; /* 权重 1 */
}复制代码

.p2 {
   color: yellow; /* 权重 10 */
}复制代码

#p2 {
  color: blue; /* 权重 100 */
}复制代码

<p style="color:pink;" class='p2' id="p2"> daasd </p> // 权重1000 
许多人会问，难道不会被后面的class id 覆盖掉？ 回答: 不会 行内权重大于类和ID复制代码

p {
  color: red !important;  /* 权重 1 + important */  所以现在他最大，同时也大于行内式 style=""
}
.p2 {
  color: yellow; /* 权重 10 */
}
#p2 {
 color: yellow; /* 权重 100 */
}

复制代码

<p style="color:pink !important;" class='p2' id="p2"> daasd </p>  // 无人能超越 行内 !important复制代码

<div id="div">
  <p class="p2" id="p3">daasd</p> //当然也会存在多个标签嵌套 
</div>复制代码

#div p { /* 此时权重为 100 + 1 */ 大于下面两个
  color:red;
}
.p2 { /* 权重为 10 */ 
  color:yellow;
} 
#p3 { /* 权重为 100 */
  color:blue;
}  
复制代码

又或者是一个更复杂的嵌套呢 ？

<div id="div" class="div-class">
  <div id="div1" class="div1-class">
    <div id="div2" class="div2-class">
      <div id="div3" class="div3-class">
         <p class="ap" id="p">daasd</p>
      </div>
    </div>
  </div>
</div>复制代码

#div p { /* 权重 100 + 1  */
  color: red;
}
/* #div p { /* 权重 100 + 1 + important  */ 加上我最大
  color: red !important;
} */

#div #div1 p { /* 权重 100 + 100 + 1  */
  color: pink;
}
#div #div1 #div2 p { /* 权重 100 + 100 + 100 + 1  */
  color: yellow;
}
#div #div1 #div2 #div3 p { /* 权重 100 + 100 + 100 + 100 + 1  */
  color: blue;
}
复制代码

.div-class #div1 .div2-class .div2-class p { /* 10 + 100 +10 + 10 + 1 */
  color:red;  
}
#div .div1-class #div2 .div3-class p { /* 100 + 10 + 100 + 10 + 1 */
  color:blue;
}
#div #div1 #div2 .div3-class p { /* 100 + 100 + 100 + 10 + 1 */
  color:pink;
}
#div #div1 .div2-class .div3-class p { /* 100 + 100 + 10 + 10 + 1 */
  color:black;
}
#div #div1 .div2-class .div3-class #p { /* 100 + 100 + 10 + 10 + 100 */
  color:yellow;
}
#div #div1 .div2-class .div3-class .ap { /* 100 + 100 + 10 + 10 + 10 */
  color:green;
}
#div #div1 .div2-class #div3 .ap { /* 100 + 100 + 10 + 100 + 10 */
  color:aqua;
}复制代码

分析得出最后一个最大 权重为 320 覆盖上面所有的。

嵌套越多，权重就越大，除过!important，有important 还是人家最大 。

（但需要注意的是嵌套期间  id class 标签的计算）

下面说说伪元素和伪类的权重

伪元素的权重，相当于类元素的权重

<p class='p2' id="p2"> daasd  </p>

p {
  color: red; /* 权重 1 */
}
p:hover { /* 类似 :hover,:visited,:active,:link 都代表是伪元素 */ 
  color: yellow; /* 权重 1 + hover权重(10) */
}
.p2:hover { /* 如果是类 权重 + 10 + hover 权重 会抵掉上面的  */ 
  color: blue;  
}
#p2:hover { /* 如果是id 权重 + 100 + hover 权重 会抵掉上面的  */ 
  color: pink; 
}

/* 如果其中一个加了!important,如果都加的话，还是id权重高，抵掉所有的 */
p:hover { /* 这里我最大，会抵掉上面的所有 */ 
  color: black !important; /* 权重 1 + hover权重(10) + important权重 */
}

复制代码

没有指上去的时候是这个效果

标签伪类指上去是这个效果

类 伪类指上去是这个效果 （抵掉标签伪类）

id 伪类指上去是这个效果 （抵掉类伪类）

标签伪类加上!important 指上去是这个效果 （抵掉上面所有）

因为伪类的权重相当于类元素，故因为类元素的权重小于id元素的权重，所以下面这个设置：hover无效的。

p {
  color: red; /* 1 */
}
#p {
  color: pink; /* 100 */
}
.p:hover {
  color: blue;  /* 10 + 10  */
}
复制代码

始终为粉色 

p {
  color: red; /* 1 */
}
#p {
  color: pink; /* 100 */
}
#p:hover {
  color: aqua;  /* 100 + 100  */
}复制代码

指上去是浅绿色

伪类的权重，相当于标签元素的权重

<p class='p2' id="p2"> daasd  </p>

p {
  color: red; /* 权重 1 */
}
p:after { /* 类似 :hover,:visited,:active,:link 都代表是伪元素 */ 
  color: yellow; /* 权重 1 + hover权重(10) */
}复制代码