css的层叠性（权重问题）
1.css的层叠性（很多公司如果要是有笔试，一定会考层叠性）
解释：就是css处理冲突问题的能力。
特点：所有的权重计算没有任何兼容性问题。
2.权重计算问题
下面我们看一下这个代码
<!DOCTYPE html> <html> <head> <title>权重计算问题</title> <meta charset="utf-8"> <style type="text/css"> /* 10+100+100+100=310 */ .box1 #d2 #d3 #d4{ width: 200px; height: 200px; background-color: red; } /* 100+10+100+10=220 */ #d1 .class2 #d3 .box4{ width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div id="d1" class="box1"> <div id="d2" class="box2"> <div id="d3" class="box3"> <div id="d4" class="box4"></div> </div> </div> </div> </body> </html>
大家可以猜猜这个盒子的颜色是红色还是蓝色。。。。。。。
在我们的认知中样式后边的样式会层叠掉前边的（当然你也可以说是覆盖了，不 过这样显得你很不严谨。。。），所以我们会觉得盒子是蓝色的对吧。。。。。。
下面我让你们看看他的颜色是什么样的。。。。。。
下边就是我们最重要的权重计算了。。。
当选择器，选择上了某个元素的时候，那么要这么统计权重：
id的数量，类的数量，标签的数量：对应的值是100，10，1
下边我们通过几个列子来看看我们的权重有什么注意的：
<style type="text/css"> #box1 .hezi2 p { color:red; } /*111*/ div div #box3 p{ color:green; }/*103*/ div.hezi1 div.hezi2 div.hezi3 p{ color:blue; }/*34*/ </style> </head> <body> <!-- 当选择器，选择上了某个元素的时候，那么要这么统计权重： id的数量，类的数量，标签的数量 --> <div class="hezi1" id="box1"> <div class="hezi2" id="box2"> <div class="hezi3" id="box3"> <p>猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
是什么颜色呢？？？？
继续看啊！！！！！！！！！
<style type="text/css"> /* id>class>标签 10个标签也比不过1个class 10个class也比不过1个id 实际上能进位（255个标签，等于1个类名）*/ div div div div div div div div div div div div p{ color:red; }/*0,0,13*/ .haha{ color:blue; }/*0,1,0*/ </style> </head> <body> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <p class="haha">文字</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body>
这个代码是不是不好看，确实不喜欢他，但是有一点要记住：当标签的数量达到255个时，等于一个类名，同理255个类名等于一个id名，但是没有实战作用！
所以文字的颜色还是蓝色！！！
接着看例子。。。。。
<style type="text/css"> /*如果权重一样那么以后出现的为准*/ #box1 .hezi2 p{ color:red; } #box2 div .pp{ color:blue; } </style> </head> <body> <div class="hezi1" id="box1"> <div class="hezi2" id="box2"> <div class="hezi3" id="box3"> <p class="pp">猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
首先是被选中了！大家计算出来的权重都是101，这个时候该听谁的呢？？？直接看结果说话吧！！！
看到了吧。。。。权重一样谁后出现听谁的
继续。。。。。。。。。。。
<style type="text/css"> #hezi1 #hezi2 #hezi3{ color:red; } div.box div.box div.box{ color:blue; } p{ color:green; } </style> </head> <body> <div class="box" id="hezi1"> <div class="box" id="hezi2"> <div class="box" id="hezi3"> <p class="pp">猜猜我是什么颜色</p> </div> </div> </div> </body> </html>
细心的同学应该就可以发现这次不是权重的问题了，因为 他们都没有选中，所以权重都是0，记住权重为零的情况下就近 原则，谁离被选中的标签近就听谁的
下面是我们的最后一个例子了
<style type="text/css"> #hezi3{ color:blue; } #hezi1 #hezi2{ color:red; } </style> </head> <body> <div class="box" id="hezi1"> <div class="box" id="hezi2"> <div class="box" id="hezi3"> <p class="pp">猜猜我是什么颜色</p> </div> </div> </div> </body> </html>
大家可以下去自己敲一下试试这个是什么颜色！！！！
下面是权重问题的总结：
1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。
当然权重问题还有更深入的，等我总结一下给写出来再给大家看！！！！！！！！！！！
如果你觉得有用请一定顶！！！！！！！！顶！！！！！！！！顶！！！！！！！！顶！！！！！！！！顶！！！！！！！！顶！！！！！！！！顶！！！！！！！！谢谢！！！！！！！
