🌜

CSS 选择器权重计算规则

CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效。且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题。

选择器的分类

正式计算选择器权重之前,先来看选择器是如何被分类的。

因为 CSS 选择器众多,在计算时,这些选择器被归为了三大类,按其权重由大到小依次为:

  • ID 选择器:比如 #dialog
  • 元素类型选择器(type selector)和伪选择器(pseudo selector):比如 h1::before
  • 类名选择器(class selector),属性选择器(attribute selector)及伪类选择器(pseudo class selector) :比如 .btn[type="radio"]:hover

其中两类特殊的样式会影响权重的生效,

  • 一是内联样式:style="color:red"。内联样式始终拥有最高的权值,会覆盖样式文件的样式。
  • 另一个是 !important 修饰词。应用该修饰词的规则权重会高于正常的规则,但不推荐。

其他选择器,

  • 全局选择器:*
  • 选择连接符:+,>,-, ,||
  • 伪类反向选择器::not()

以上,对权重的计算没影响,即不参与计算。

权重的计算

根据以上对选择器的分类,对任意样式规则,可得到 (W,X,Y,Z) 这么一个值,其中,

  • W:标识是否有内联样式
  • X:ID 的数量
  • Y:类名选择器,属性选择器及伪类选择器的数量
  • Z:元素选择器,伪选择器 的数量

对于同一元素身上的多条样式,对第条样式规则计算出上面四个值,然后从左往右逐个比较,数字大的胜出。

如果权重全部一样,后面的规则会生效。

示例

示例一

考察下面的示例代码:

<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;
}
  • 先来分析第一条规则 ul > li ,包含 2 个元素类型选择器,得到的权值为 (0,0,0,2)

  • 再看 .list > .list-item,包含 2 个类名选择器,权值为 (0,0,2,0)

两者一对比,在进行到第三位时,后面的 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;
}
  • 首先 nav#nav > li:hover 规则中有 1 个 ID 选择器,2 个元素选择器以及 1 个伪类选择器,权值为 (0,1,1,2)

  • li: nth-child(2):hover 中,2 个伪类选择器和 1 个类型选择器,权值为 (0,0,2,1)

一对比,前者胜出,因为比较到第二位时,前者是 1 后者是 0。只要有大于的情况,后面的值就不用比较了。

因此列表中元素在 hover 时,会是紫色(purple)。

相关资源

posted @ 2019-06-26 23:58  刘哇勇  阅读(...)  评论(... 编辑 收藏

Bingo!!

少年,我看你骨骼清奇,怕是一名前端吧‽