css中的层叠性及权重是什么

本文小编为大家详细介绍“css中的层叠性及权重是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“css中的层叠性及权重是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

层叠性：多个选择器选中同一个标签，设置同一个样式，浏览器中加载时，不会加载所有的属性值，挑选其中一个加载，其中一个值层叠/覆盖掉其他的值。

要实现层叠或覆盖就涉及到比较，下面就是比较选择器之间的权重的比较，权重的比较一共有两种情况：1、选择器选中了标签；2、选择器没有选中标签

首先说一下选择器的权重：id>class>标签>*(通配符)；

①选择器选中了标签：

首先：如果都选中了标签，比较选择器权重。

选择器有权重，权重大的会层叠权重小的。

计算权重：选择器选择的范围越大，权重反而越小。id>class>标签>*

方法：数选择器的数量，先比较id个数→再比较class个数→最后比较标签个数。

其次：如果选择器权重相同，比较css中代码的书写顺序。

css代码有加载顺序，从上往下加载，后面加载的会覆盖前面加载。

#box1 .box2 .box3 p{ (1,2,1)

color: red;

}

.box1 #box2 .box3 p{ (1,2,1)

color: green;

}

.box1 .box2 #box3 p{ (1,2,1) 书写顺序最后，层叠前面的样式 　　color: blue;

}

②选择器都没有选中标签：一部分样式是可以继承的。继承谁的？

首先：比较每个选择器选中的元素，距离目标元素p的在HTML中的距离，距离近的层叠距离远的。简称就近原则。

#box1{

color: red;

}

.box1 .box2{

color: green;

}

.box3{ 选中的标签距离p最近，继承他的

color: blue;

}

其次：如果距离一样近，比较权重，权重大的层叠权重小的。

#box1 .box2 #box3{ (2,1,0)

color: red;

}

.box1 #box2.box2 #box3{ (2,2,0) 　　color: green;

}

.box1 .box2 #box3.box3{ (1,3,0)

color: blue;

}

再次：如果距离一样近，选择器权重一样，看书写顺序。

#box1 .box2 #box3.box3{

特殊的，在比较权重的过程中，有一个单词important可以提升某一个样式属性的权重到最大。

比较就近原则，important对继承性没影响。

#box1 .box2 #box3.box3{

color: red;

}

#box3{

color: green !important; 将这条属性的权重提升的最大，与选择器权重无关

}

#box1.box1 #box2 .box3{

color: blue;

}

读到这里，这篇“css中的层叠性及权重是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。