CSS优先级指的是当多个CSS规则应用于同一元素时,哪些规则会被优先应用。当一个元素同时被多个CSS规则加以修饰时,浏览器很可能会出现混淆,因为相互之间存在冲突。此时就需要通过CSS优先级规则来决定应用哪个规则。
以下是CSS优先级的计算规则:
内联样式(1000分) ID选择器(100分) 类选择器、属性选择器和伪类选择器(10分) 元素选择器和伪元素选择器(1分) 通配符选择器、子选择器、相邻兄弟选择器和后代选择器没有优先级,只与前面的选择器相加
如下面的示例代码:
<style> div { color: red; } #test { color: blue; } .info { color: green; } </style> <div id="test" class="info">hello, world!</div>
在这个示例代码中,div元素同时存在类选择器、ID选择器和元素选择器,因此需要根据CSS优先级规则进行计算。因为#test选择器的优先级最高,所以它的样式会被应用。
如果参考上面的优先级规则,
- 内联样式有1000的优先级,所以<div style="color: purple">hello, world!</div>会被显示为紫色。
- 如果要优先应用某个特定的样式,可以考虑使用!important命令,例如将<div id="test" style="color: blue !important">hello, world!</div>设置为蓝色。需要注意的是,!important会覆盖所有其他选择器的样式,包括内联样式。