前端css优先级以及继承
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.继承来的,描述的一样近,权重一样,后来者居上