CSS 选择器权重计算规则

栏目: CSS · 发布时间: 5年前

内容简介:CSS 选择器(Selector)的权重(Specificity)决定了对于正式计算选择器权重之前,先来看选择器是如何被分类的。因为 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
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)。


以上所述就是小编给大家介绍的《CSS 选择器权重计算规则》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法引论

算法引论

[美]Udi Manber / 黄林鹏、谢瑾奎、陆首博、等 / 电子工业出版社 / 2005-9-1 / 35.00元

本书是国际算法大师乌迪·曼博(Udi Manber)博士撰写的一本享有盛誉的著作。全书共分12章:第1章到第4章为介绍性内容,涉及数学归纳法、算法分析、数据结构等内容;第5章提出了与归纳证明进行类比的算法设计思想;第6章到第9章分别给出了4个领域的算法,如序列和集合的算法、图算法、几何算法、代数和数值算法;第10章涉及归约,也是第11章的序幕,而后者涉及NP完全问题;第12章则介绍了并行算法;最后......一起来看看 《算法引论》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具