css的层叠性与权重的讲解
不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加。
为了解决听谁的问题,引入层叠性的概念。
CSS样式层叠权重值
根据CSS规范,具体性越明确的样式规则,权重值越高。计算权重值的依据,并不是许多文章所描述的那样“class是10,标签是1,ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。
首先来看一个便于记忆的顺序”important>内联 >ID>类 >标签 |伪类|属性选择 >伪对象 >继承 >通配符”
选择器权重值的计算
A:如果规则是写在标签的style属性中(内联样式),则A=1,否则,A=0. 对于内联样式,由于没有选择器,所以B、C、D的值都为0,即A=1, B=0, C=0, D=0(简写为1,0,0,0,下同)。
B:计算该选择器中ID的数量。如果有则B=1,没有B=0(例如,#header 这样的选择器,计算为0, 1, 0, 0)。
C:计算该选择器中伪类及其它属性的数量(包括class、属性选择器等,不包括伪元素)。(例如, .logo[id='site-logo'] 这样的选择器,计算为0, 0, 2, 0)(后面将进一解释为什么会是0,0,2,0)。
D:计算该选择器中伪元素及标签的数量。(例如,p:first-letter 这样的选择器,计算为0, 0, 0, 2)。
层叠性:多个选择器选中同一个标签,设置同一个样式,浏览器中加载时,不会加载所有的属性值,挑选其中一个加载,其中一个值层叠/覆盖掉其他的值。
要实现层叠或覆盖就涉及到比较,下面就是比较选择器之间的权重的比较,权重的比较一共有两种情况:1、选择器选中了标签;2、选择器没有选中标签
首先说一下选择器的权重:id>class>标签>*(通配符);
①选择器选中了标签:
首先:如果都选中了标签,比较选择器权重。
选择器有权重,权重大的会层叠权重小的。
计算权重:选择器选择的范围越大,权重反而越小。id>class>标签>*
方法:数选择器的数量,先比较id个数→再比较class个数→最后比较标签个数。
图片中的标注顺序(id个数,class个数,标签个数)
页面上显示的样式:
|
控制台显示:
|
其次:如果选择器权重相同,比较css中代码的书写顺序。
css代码有加载顺序,从上往下加载,后面加载的会覆盖前面加载。
#box1 .box2 .box3 p{ (1,2,1) color: red; } .box1 #box2 .box3 p{ (1,2,1) color: green; } .box1 .box2 #box3 p{ (1,2,1) 书写顺序最后,层叠前面的样式 color: blue; }
②选择器都没有选中标签:一部分样式是可以继承的。继承谁的?
首先:比较每个选择器选中的元素,距离目标元素p的在HTML中的距离,距离近的层叠距离远的。简称就近原则。
#box1{ color: red; } .box1 .box2{ color: green; } .box3{ 选中的标签距离p最近,继承他的 color: blue; }
其次:如果距离一样近,比较权重,权重大的层叠权重小的。
#box1 .box2 #box3{ (2,1,0) color: red; } .box1 #box2.box2 #box3{ (2,2,0) color: green; } .box1 .box2 #box3.box3{ (1,3,0) color: blue; }
再次:如果距离一样近,选择器权重一样,看书写顺序。
#box1 .box2 #box3.box3{ color: red; } .box1 #box2.box2 #box3{ color: green; } #box1.box1 #box2 .box3{ color: blue; }
特殊的,在比较权重的过程中,有一个单词important可以提升某一个样式属性的权重到最大。
比较就近原则,important对继承性没影响。
#box1 .box2 #box3.box3{ color: red; } #box3{ color: green !important; 将这条属性的权重提升的最大,与选择器权重无关 } #box1.box1 #box2 .box3{ color: blue; }
综上所述:
最后:
移上比较都是以css内嵌式为例,在css的行内式、内嵌式和外链式中,权重:行内>内嵌=外链,顾名思义无论内嵌式或者外链式的权重多大都抵不过一句行内式!
以上就是css的层叠性与权重的讲解的详细内容,更多请关注其它相关文章!
下一篇: alert是什么意思
推荐阅读
-
权重的高低与网站收录有何关系?两者有什么关联性!
-
css样式的继承性、层叠性 、优先级
-
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
-
DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性(转载的)_html/css_WEB-ITnose
-
CSS中的特殊性、继承、层叠_html/css_WEB-ITnose
-
DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性(转载的)_html/css_WEB-ITnose
-
【CSS笔记四】CSS的继承、层叠和特殊性
-
【CSS笔记四】CSS的继承、层叠和特殊性
-
css兼容性写法的实例讲解
-
ZT:DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性_html/css_WEB-ITnose