CSS 选择器权重计算规则
Posted wayou
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 选择器权重计算规则相关的知识,希望对你有一定的参考价值。
CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效。且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题。 选择器的分类正式计算选择器权重之前,先来看选择器是如何被分类的。 因为 CSS 选择器众多,在计算时,这些选择器被归为了三大类,按其权重由大到小依次为:
其中两类特殊的样式会影响权重的生效,
其他选择器,
以上,对权重的计算没影响,即不参与计算。 权重的计算根据以上对选择器的分类,对任意样式规则,可得到
对于同一元素身上的多条样式,对第条样式规则计算出上面四个值,然后从左往右逐个比较,数字大的胜出。 如果权重全部一样,后面的规则会生效。 示例示例一考察下面的示例代码: <ul class="list">
<li class="list-item">item1</li>
<li class="list-item">item2</li>
<li class="list-item">item3</li>
</ul> ul > li
color: blue
.list > .list-item
color: red;
两者一对比,在进行到第三位时,后面的 2>0,所以后者胜出,它的样式将生效,列表颜色为红色。 示例二<nav id="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav> nav#nav > li:hover
color: purple;
li: nth-child(2):hover
color:pink;
一对比,前者胜出,因为比较到第二位时,前者是 1 后者是 0。只要有大于的情况,后面的值就不用比较了。 因此列表中元素在 hover 时,会是紫色(purple)。 相关资源 |
以上是关于CSS 选择器权重计算规则的主要内容,如果未能解决你的问题,请参考以下文章