当我们在编写CSS样式表时,可能会遇到同一元素有多个样式定义的情况。这时候就需要了解CSS中的优先级设定。
首先,需要知道CSS样式有三种应用方式:内联样式、内部样式和外部样式。其中内联样式的优先级最高,其次是内部样式,最后是外部样式。
<div style="color: red;">我是内联样式</div> <style> .text { color: blue; } #title { color: green; } </style> <div class="text" id="title">我是内部样式</div> <link rel="stylesheet" href="style.css"> <div class="text" id="title">我是外部样式</div>
但是在外部样式中,如果使用了!important,则该样式会覆盖掉其他优先级。例如:
.text { color: yellow !important; }
此时,无论元素的其他样式定义优先级如何,都会被yellow替换。
在同一样式定义中,也可能存在多个CSS属性值的定义,此时需要根据不同的属性值来确定优先级。
CSS属性值的优先级顺序如下:
- 样式值!important
- 行内样式
- ID选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
故在同一样式定义中,如果存在!important,则该属性值具有最高优先级。
.text { color: green; color: red !important; }
此时,即使其他选择器的样式定义优先级更高,也会被!important的属性值覆盖。
需要注意的是,当不同优先级的样式定义存在于不同CSS文件中时,其优先级将由“就近原则”来确定,即离元素最近的样式定义具有较高的优先级。