当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。
优先级的规则
- 内联样式 , 优先级 1000
- id选择器,优先级 100
- 类和伪类, 优先级 10
- 元素选择器,优先级 1
- 通配* , 优先级 0
- 继承的样式,没有优先级
当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。
并集选择器的优先级是单独计算
div , p , #p1 , .hello{}
可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用!important
分别测试下这6种情况:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .p1 { background-color: yellow; } p { background-color: red; } * { font-size: 50px; } p { font-size: 30px; } #p2 { background-color: yellowgreen; } p#p2 { background-color: red; } .p3 { color: green; } </style> </head> <body> <p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落 <span>我是p标签中的span</span> </p> </body> </html>
background-color:
p#p2 :继承的样式,没有优先级;
*p:通配* 优先级0;
p :元素选择器,优先级 1;
.p1:类和伪类, 优先级 10;
p2 优先级 100;
style="background-color: orange;"优先级1000;
因此背景颜色为 organge。
color:
p3:因为只有这一个设置color因此绿色。