计算选择器的权重

作者: 打铁大师 | 来源:发表于2017-05-04 13:11 被阅读0次

下面的代码,文字显示什么颜色?

<style>
#red {
    color: red;
}
.yellow {
    color: yellow;
}
p.yellow {
    color: black;
}
</style>
<p id="red" class="yellow">颜色</p>

文字是红色的,即便黄色,黑色定义在红色之后,但是id定义的样式权重高,因此显示id定义的颜色。

计算选择器的权重规则:

  • 如果样式来自标签style属性,那么权重加1000;
  • 如果来自id定义的,那么权重加100*数量;
  • 如果来自其它属性、类和伪类,那么权重加10*数量;
  • 如果来自元素名和伪元素的数量,那么权重加1*数量;

注意:通用选择器(),子选择器(>)和相邻同胞选择器(+)并不在这四个规则中,所以他们的权值都为0。*

权重的计算示例:

选择器 权重
* {} 0
li{} 1
li:first-line{} 2
ul li {} 2
ul ol+li {} 3
h1 + *[rel=up]{} 11
ul ol li.red{} 13
li.red.level {} 21
#red{} 100
style="" 1000

如果权重一样大,后面的样式覆盖前面的样式。否则,显示权重大的样式规则。

相关文章

  • CSS样式选择器权重 计算

    CSS样式选择器权重 计算

  • 优先级之权重问题

    作用:当多个选择器混合在一起使用时,我们可以通过权重来判断谁的优先级最高。 权重的计算规则: 首先计算选择器中有多...

  • css选择器

    继承的没有权重 通配符选择器 * 权重 0 标签选择器 div 权重 1 class类选择器 . 权重 10 id...

  • 元素的优先级

    权重的计算: 內联>id>类,伪类>元素>通配符>继承的样式不同的选择器有不同的权重值:内联样式:权重是 1000...

  • CSS优先级-权重问题

    什么是优先级的权重? 作用:当多个选择器混合在一起使用时,可以通过计算权重判断谁的优先级最高 权重的计算规则 2....

  • css之权重问题

    一什么是优先级的权重?作用:当多个选择器混合在一起使用时,我们可以通过计算权重来判断谁的优先级最高 二权重的计算规...

  • CSS 基础

    一、样式选择器 特殊性:通用选择器*权重值为0,标签权重值为1,类选择器和伪类选择器权重值为10,ID选择器权重值...

  • 计算选择器的权重

    下面的代码,文字显示什么颜色? 文字是红色的,即便黄色,黑色定义在红色之后,但是id定义的样式权重高,因此显示id...

  • 2018-11-07     css选择器权重的计算

    今天看了一下w3c,颠覆了我对之前网上权重的计算规则看法,以下简单做些翻译: 选择器权重的计算规则: 1、ID选择...

  • Css权重计算方式

    权重计算公式 将选择器按:id选择器,类选择器,标签选择器进行个数统计,根据统计结果进行排序 由统计的结果可知,1...

网友评论

    本文标题:计算选择器的权重

    本文链接:https://www.haomeiwen.com/subject/dsprtxtx.html