最近学css样式,优先级有点繁琐,简单记录一下。
css中的优先级规则为:
- 有!important的最优先;
- 其次权重高的优先;
- 权重相同则后定义优先,会覆盖前面的。
至于权重:
- #id 为100;
- class类或伪类、属性选择器为10;
- 标签选择器为1
- 内联样式style= 为1000。
所以有上图的权重值。
至于继承,谁在body中更靠近p标签就用谁,若靠近程度一样,则继续用权重比较。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>权重</title> <style> #box1 .b p{ color: green;} #box1 .b .c p{ color: red;} #lyf p{ color: yellow;} #box2 #box3 p{ color: darkblue;} p{ color: darkorange !important;} #box2{ color: #123;} #box1{ color: #789;} </style> </head> <body> <div id="box1" class="a"> <div id="box2" class="b"> <div id="box3" class="c"> <p id="lyf" class="d" >刘亦菲</p> </div> </div> </div> </body> </html>