css的层叠性和选择权重计算

1，什么叫做层叠性？

这个要从css的名字说起，css的全名叫做“层叠式样式表”，层叠行是她很重要的性质。层叠行是指“多个选择器可以同时作用在同一个标签，效果叠加”

<p id="para" class="spec">我是段落</p>

<style>
p {
  color:red;
}
.spec {
  font-style:italic;
}
#para {
  text-decoration:underline;
}
</style>

效果一

这个时候我们可以发现这三个选择器都选择到了这个标签，并且样式也都生效了，就像是一层一层的刷上去的 ，这就是css的层叠性。

2，层叠行的冲突处理

如果多个选择器定义的属性有冲突呢？
css有严密的处理冲突的规则:id权重 > class权重 > 标签权重

p {
  color:red;
}
#para {
  color:green;
}
.spec {
  color:blue;
}

效果二

最终会以ID选择器的样式为准

3，复杂选择器权重计算

负责选择器可以功过（id的个数，class的个数，标签的个数）的形式，计算权重

<div id="box1" class="box1">
  <div id="box2" class="box2">
    <div id="box3" class="box3">
      <p>我是段落</p>
    </div>
  </div>
</div>

<style>
/* id 个数：2，class个数：0，标签个数：1*/
#box1 #box2 p {
  color:red;
}
/* id 个数：2，class个数：1，标签个数：2*/
#box1 div.box2 #box3 p {
  color:green; 
}
/* id 个数：0，class个数：3，标签个数：1*/
.box1 .box2 .box3 p {
  color:blue;
} 
</style>

效果3

css会先冲权重高的id选择器个数开始判断，当id个数相同时会判断.class的个数，一次类推。所以这里会使用第二个样式，将文字颜色设置为green；

4,!important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important

.spec {
  color: blue !important;
}

很多公司不允许使用!important,因为这会代理不经意的样式冲突。

5, 就近原则

当样式是通过继承获取到的时候。那么则和权重的大小无关，哪个选择器距离的近就使用哪一个选择器的样式！

<div id="box1" class="box1">
  <div id="box2" class="box2">
    <div id="box3" class="box3">
      <p>我是段落</p>
    </div>
  </div>
</div>

<style>
#box1 #box2 {
  color:red;
}

/* p 标签距离 .box3 更近 所以这里p标签会优先继承这个样式*/
.box1 .box3{
  color:green;
}
</style>