<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器优先级</title> <style type="text/css"> .p1{ background-color: yellow; } p{ background-color: red; } /* 使用不同选择器，选中同一元素并设置相同样式 样式之间发生冲突，最终采用那个选择器样式， 由选择器优先级（权重）决定 优先级规则 内联样式 优先级 1000 （<p style="background-color: skyblue;">我是段落</p>） id选择器 优先级 100 类和伪类 优先级 10 元素选择器 优先级 1 通配* 优先级 0 继承的样式，没有优先级 选择器中包含多种选择器是，需将多种选择器优先级相加然后比较 注意，选择器优先级计算不会超过他最大数量级,如果选择器优先级一样 则使用靠后样式 并集选择器的优先级是单独计算 div，p，#p1，.hello{} 可以在样式最后添加！important，此时该样式将会获得一个最高优先级 将会优先于所有样式显示，甚至超过内联样式 但在开发中尽量避免使用！important */ *{ font-size: 50px; } p{ font-size: 30px; } #p2{ background-color: yellowgreen; } p#p2{ background-color: red; } .p1{ color: yellow; } .p33{ color: green; } </style> </head> <body> <p class="p1 p33" id="p2" >我是一个段落 <span>我是p标签的span</span> </p> </body> </html>
不同选择器选择同一元素样式之间发生冲突，采用哪种样式由选择器优先级（权重）决定
优先级 内联样式 1000 （例：<p style="background-color：blue">我是段落</p>）
id选择器100 类和伪类 10 元素 1 通配 * 0 继承的样式没有优先级
包含多种选择器需要相加再比较 且优先级不会超出自己最大数量级，选择器优先级一致则使用靠后样式
并集选择器优先级单独计算
也可以在样式最后添加！important 此时该样式获得最高优先级（开发中尽量避免使用）