内容简介:一个元素有多个样式对他进行设置的时候,那么哪个样式会起作用呢?这就需要一个规则计算,这个规则就是权重。谁的权重大,就使用那个样式。根据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个 c
: body
和 img
那我们再来看几个例子:
// 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
最后神器
最后推荐一个特别棒的工具,你可以输入选择器,然后计算权重。也可以对多个权重进行排序。
如果不清楚哪个权重更大,使用这个 工具 可以一目了然,也方便我们对权重的学习。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 一文搞清Gradle依赖
- 彻底搞清楚SSL/TLS
- 彻底搞清楚Java并发 (一) 基础
- 一篇文章搞清电商订单结算页面设计?
- 搞清楚 Python 的迭代器、可迭代对象、生成器
- 忘记模板库-一图搞清工作型PPT制作核心呈现逻辑(200627)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!