彻底搞清楚css权重

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

内容简介:一个元素有多个样式对他进行设置的时候,那么哪个样式会起作用呢?这就需要一个规则计算,这个规则就是权重。谁的权重大,就使用那个样式。根据w3c的规范,元素分为三个等级:我们按照刚才的规则进行分类计算,计算一下有几个

一个元素有多个样式对他进行设置的时候,那么哪个样式会起作用呢?这就需要一个规则计算,这个规则就是权重。谁的权重大,就使用那个样式。

根据w3c的规范,元素分为三个等级:

a
b
c

计算权重

我们按照刚才的规则进行分类计算,计算一下有几个 a ,几个 b , 几个 c

示例:

body #content .data img:hover
复制代码

这个按照 a,b,c 这种格式计算的结果就是: 1,2,2

我们来分析一下。

有1个 a#content

有2个 b :一个class: .data , 一个伪类: :hover

有2个 cbodyimg

那我们再来看几个例子:

// 0,0,2(一个标签,一个伪元素)
li:first-line
复制代码
// 0,1,1(一个属性选择器,一个标签)
h1 + *[rel=up]
复制代码
// 1,1,2(一个id选择器,一个类选择器,2个标签)
body #darkside .sith p
复制代码

使用方法。

现在我们已经知道怎么计算权重了,下一步我们就看看怎么来比较谁的权重大谁的权重小。权重大的样式会起作用。

首先比较第一个等级 a ,谁的 a 的个数多权重就大。如果 a 的个数一样,则比较 b ,跟 a 的规则一样,谁的 b 的个数多,谁的权重就大。如果一样在比较 c 。一样的规则。

这样的话,谁的权重大,谁就对元素起作用。

如果最后 abc 都一样怎么办,那就比较谁最后写的,一般后面写的会覆盖前面的样式。

比如:

body div{
    background: blue
}
 
div{
    background: red;
}
复制代码

以上两个样式, blue 会起作用。

!important 和 行内样式

除了以上三个等级之外,我们还有另外两个,一个是行内样式,一个是 !important

而行内样式 比 ID选择器高一级, !important 比行内样式又高一级。

等级关系

所以最终等级比较是:

!important > 行内样式 > ID选择器 > 类选择器 | 属性选择器| 伪类选择器 > 标签|伪元素

通过上面的方法,我们就可以计算出权重,比较大小。就可以知道那个样式会起作用了。

建议

!important
id

最后神器

最后推荐一个特别棒的工具,你可以输入选择器,然后计算权重。也可以对多个权重进行排序。

如果不清楚哪个权重更大,使用这个 工具 可以一目了然,也方便我们对权重的学习。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

Hacking Growth

Hacking Growth

Sean Ellis、Morgan Brown / Crown Business / 2017-4-25 / USD 29.00

The definitive playbook by the pioneers of Growth Hacking, one of the hottest business methodologies in Silicon Valley and beyond. It seems hard to believe today, but there was a time when Airbnb w......一起来看看 《Hacking Growth》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具