关于css中层叠性的一点理解
2016-09-04 02:15
447 查看
关于css层叠性的一点理解
标签(空格分隔): html css我们平时在写css的时候会遇到这样的情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> <style type="text/css"> #div1 #div2 p { color: red; } .color1 .color2 p { color: blue; } </style> </head> <body> <div id="div1" class="color1"> <div id="div2" class="color2"> <p>看看我是什么颜色吧</p> </div> </div> </body> </html>
在这里,我们对同一个段落定义了两种颜色,那么这个段落到底会显示什么颜色呢?
是的,显示了红色,肯定很多人已经很清楚了,这里涉及到了一个选择器的权重问题。
一个选择器的权重是这样计算的:
对于选择器中给定的各个ID值,加0,1,0,0.
对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0.
对于选择器中给定的各个元素和伪元素,加0,0,0,1.
最后,结合符和通配符对特殊性没有任何贡献,也就是0,0,0,0
所以上面的例子中红色的权重为0,2,0,1,蓝色权重为0,0,2,1,显然红色的更IMBA,所以显示为红色。
我们接着看这个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo03</title> <style type="text/css"> #div1 .color2 p { color: red; } .color1 #div2 p { color: blue; } </style> </head> <body> <div id="div1" class="color1"> <div id="div2" class="color2"> <p>看看我是什么颜色吧</p> </div> </div> </body> </html>
在这个例子里面,两种颜色的权重相同都是0,1,1,1.那么在这种情况下,就会采用“后来居上”的原则,也就是后面的属性会覆盖前面的属性
我们可以看到红色被覆盖了
我们再看下面这个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 #div2 { color: red; } .color1 .color2 p { color: blue; } </style> </head> <body> <div id="div1" class="color1"> <div id="div2" class="color2"> <p>看看我是什么颜色吧</p> </div> </div> </body> </html>
这里,如果有不清楚的童鞋可能会认为:红色的权重更高,所以应该显示为红色,我们来看看结果
为什么是蓝色呢?这里我们应该注意到,红色的这个选择器并没有真正选中p标签,也就意味着,p标签里的颜色是通过继承父div得到的
我们可以看出,继承的来的属性权重非常低,完全不如ID选择器和class选择器或者标签,那么他到底有多低呢?看下面的例子,我们在上面的代码中加入这样一个css语句
*{ color: green; }
结果如何呢?
前面说过,通配符的权重为0,0,0,0,但继承来的属性依然干不过通配符。其实,继承的值根本没有权重值,甚至连0都没有,也就是说,谁都可以秒杀他.
我们还会遇到一种情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo04</title> <style type="text/css"> #div1 { color: red; } .color1 .color2 { color: blue; } </style> </head> <body> <div id="div1" class="color1"> <div id="div2" class="color2"> <p>看看我是什么颜色吧</p> </div> </div> </body> </html>
这里两种颜色都是继承值,那该听谁的呢?这里采用的是“就近原则”,也就是说,谁的选择符描述离目标近,就听谁的。显然,蓝色的选择符描述的更近,所以会显示蓝色
最后,我们来看一个更特殊的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> <style type="text/css"> #div1 #div2 { color: red; } .color1 .color2 { color: blue; } </style> </head> <body> <div id="div1" class="color1"> <div id="div2" class="color2"> <p>看看我是什么颜色吧</p> </div> </div> </body> </html>
这个例子中,两者都是继承值,描述的离目标一样近,那么结果会如何呢?
其实,在这种情况下,会再比较他的权重值,权重值大的获胜,此时如果权重值在相同,就要采用“后来居上”原则
通过以上几个例子,总结一下,css属性层叠性主要是这样来确定的
1.元素被直接选中时,看权重,权重相同的,“后来居上”
2.元素没有被直接选中,(也就是继承值),“就近原则”。如果距离相同,看权重,权重再相同,“后来居上”。
ps:最近刚开始学习前端,所以有很多的知识可能理解的很肤浅甚至可能是错误的,所以希望各位大神能够批评指正,谢谢!
----关爱“小学生”协会
相关文章推荐
- 关于 a:active 的一点理解 [CSS]
- 关于BMP图片的一点理解,读取图象数据到数组
- [zt]关于左值"lvalue"和右值"rvalue"的一点理解
- 关于StrutsFormBean 的一点理解
- 关于Asp.net web控件事件处理的一点理解
- 关于DataRow和DataColumn的一点个人简单理解
- 关于DataRow和DataColumn的一点个人简单理解
- us/os ii 学习笔记 20100421 关于os的一点宏观理解
- 关于表格行的CSS的一点经验.
- 关于CSS属性display:inline-block的深入理解
- 关于AS3中弱引用的一点理解
- 关于equals()和==操作的一点理解
- 关于KMP算法的一点个人理解
- 关于Provider Bridge的一点理解
- 关于DataRow和DataColumn的一点个人简单理解
- 关于 *Object 的一点理解,肯定不全对 希望和大家交流
- 关于龙芯拿MIPS授权的一点理解
- 关于DataRow和DataColumn的一点个人简单理解-.NET教程,数据库应用
- 我的一点浅见——关于机器的理解
- 关于AS3中弱引用的一点理解(转载)