在CSS中,每个属性都有一个优先级,当多个规则同时作用于同一个元素时,就需要根据优先级来决定哪个规则起作用。CSS优先级机制的基本原则是:样式定义的特定程度越高,优先级就越高。但是,具体的优先级规则却比较复杂。
优先级的计算方式:
内联样式(最高优先级) | ID选择器 | 类选择器、属性选择器、伪类选择器 | 元素选择器、伪元素选择器 | 通配符选择器、子选择器、相邻兄弟选择器、后代选择器 | 继承样式(最低优先级)
例如,以下规则中的属性会作用于HTML文档中所有h1元素:
h1 { color: blue; }
但是,如果我们再添加一个规则:
#header h1 { color: red; }
这个规则中的属性也是作用于h1元素的。那么,当一个元素绑定了多个规则时,如何计算优先级呢?一般情况下,有以下几个步骤:
- 计算内联样式(如果有)
- 计算ID选择器
- 计算类、属性、伪类选择器
- 计算元素、伪元素选择器
- 计算通配符、子选择器、相邻兄弟选择器、后代选择器
- 计算继承样式(如果有)
在同一级别的情况下,后面的规则会覆盖前面的规则。例如:
h1 { color: blue; } h1 { color: red; }
这样,h1元素的颜色就是红色。
需要注意的是,!important可以将属性赋予最高优先级,即使其他规则定义的优先级更高,也无法覆盖!