内容简介:一个元素有多个样式对他进行设置的时候,那么哪个样式会起作用呢?这就需要一个规则计算,这个规则就是权重。谁的权重大,就使用那个样式。根据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)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Programming From The Ground Up
Jonathan Bartlett / Bartlett Publishing / 2004-07-31 / USD 34.95
Programming from the Ground Up is an introduction to programming using assembly language on the Linux platform for x86 machines. It is a great book for novices who are just learning to program as wel......一起来看看 《Programming From The Ground Up》 这本书的介绍吧!