CSS中的权重

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS中的权重相关的知识,希望对你有一定的参考价值。

参考技术A

元素会被多个样式一层层作用,这就是层叠样式表的来源。如果多个样式作用在元素上就会产生优先级权重的问题。

零、属性后面使用!important,权重最大,会覆盖页面内任何位置定义的元素样式。
一、内联样式,权重为1000【写在html元素的style属性中】
二、ID选择器,权重为0100【非内联样式】
三、类、伪类、属性选择器,权重为0010【非内联样式】
四、标签、伪元素选择器,权重为0001【非内联样式】
五、通配符、子选择器、相邻选择器等,权重为0000【非内联样式】
六、继承的样式没有权重
注意
没有权重 权重为0 权重为0 的权重比 没有权重 的大,优先级高

1、 选择器中 ID选择器 的权重【a = 数量 * 权重】
2、 选择器中 类、伪类、属性选择器 的权重【b = 数量 * 权重】
3、 选择器中 标签、伪元素选择器 的权重【c = 数量 * 权重】
4、 最终的权重w = a + b + c

运行截图

width:宽度【块级元素的会继承父类的内容宽度contentwidth,】
color:字体的颜色

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)。

相关资源

以上是关于CSS中的权重的主要内容,如果未能解决你的问题,请参考以下文章

CSS-!important提升权重用法

CSS权重与优先级-详细分析

css都有哪些选择器

CSS-03-三大特性+盒子模型

CSS module和React 中的应用

CSS学习层叠