1.css优先级以及继承
css具有两大特性：继承性和层叠性
继承性
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
层叠性
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
权重大小比较方法：
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*1 0 0*/ #box{ color: green; } /*0 1 0*/ .container{ color: yellow; } /*0 0 1*/ p{ color: red; } </style> </head> <body> <p id="box" class="container"> 赵云是什么颜色 </p> </body> </html>
例2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*2 0 1*/ #box1 #box2 p{ color: red; } /*2 1 1*/ #box1 #box2 .wrap3 p{ color: yellow; } /*0 3 4*/ div.wrap1 div.wrap2 div.wrap3 p{ color: green; } /*3 0 1*/ #box1 #box2 #box3 p{ color: pink; } </style> </head> <body> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
例3：权重相同处理
当权重一样的 后来者居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box2 .wrap3 p{ color: yellow; } #box1 .wrap2 p{ color: red; } </style> </head> <body> <!-- 当权重一样的 后来者居中 --> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
例4：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*继承的权重是0*/ /*#box1 .wrap2{ color: red; } #box2 .wrap3 p{ color: yellow; }*/ /*权重为0。就近原则 谁描述的近*/ /*#box1 .wrap3{ color: green; } #box1 .wrap2{ color: red; }*/ #box1 .wrap2 .wrap3{ color: red !important; } .wrap1 #box2 .wrap3{ color: green; } </style> </head> <body> <!-- 当权重一样的 后来者居中 --> <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p style=''>再来猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
技巧：
1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
3.继承来的，描述的一样近，数权重
4.继承来的，描述的一样近，权重一样，后来者居上