彻底搞清楚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

最后神器

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

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


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

查看所有标签

猜你喜欢:

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

我是一只IT小小鸟

我是一只IT小小鸟

胡江堂、李成、唐雅薇、秦琴、蒋宇东、刘未鹏、居振梁、刘帅、温卫斌、张弦、张凯峰、庄表伟、宋劲杉、程露、黄小明、易晓东、简朝阳、林健、高昂、徐宥、辜新星 / 电子工业出版社 / 2009 / 29.80

一群IT小小鸟—— 来自十几所院校,或男生,或女生;或科班,或半路转行。 分布在不同的公司,或外企,或国企,或民企,老板有土有洋。 有失意,有快意;有泪水,有欢笑。在失望中追求希望,在迷茫中辨别方向。 他们用自己的成长故事,告诉在校的师弟师妹们: 青春太宝贵,千万别浪费;要想不浪费,万事早准备。一起来看看 《我是一只IT小小鸟》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试