CSS 选择器、权重和匹配规则
CSS 会按照特定的权重和匹配规则来决定哪一个规则应该被应用。下面我将对这些概念进行深入探讨。
CSS 选择器
选择器定义了样式规则应该应用于哪些元素。以下是一些常用的选择器
元素选择器 选取特定的 HTML 元素。例如,p选择器会选取所有的<p>元素。
类选择器 以.为前缀。例如,.intro会选取所有拥有class="intro"的元素。
ID 选择器 以#为前缀。例如,#header会选取拥有id="header"的元素。
后代选择器 例如,div p会选取所有div元素内部的p元素。
属性选择器 例如,[target="_blank"]会选取所有target属性值为_blank的元素。
除了上述这些基本选择器外,CSS 还提供了一些高级选择器,如子元素选择器(>)、相邻兄弟选择器(+)、通用兄弟选择器(~)
等。合理使用这些选择器可以帮助我们更精准地选取目标元素。
CSS 权重
当一个元素被多个规则选中时,权重将决定哪个规则被应用。权重由以下几个因素决定
- 内联样式 直接在 HTML 元素上使用
style属性定义的样式。 - ID 选择器
- 类选择器、属性选择器和伪类
- 元素选择器和伪元素
权重可以被看作是一个四位的数字,例如 0,1,0,0。更高的权重意味着更高的优先级。
| Selector Type | Weight |
|---|---|
| Inline styles | 1,0,0,0 |
| ID selectors | 0,1,0,0 |
| Class selectors, Attribute selectors, Pseudo-classes | 0,0,1,0 |
| Element selectors, Pseudo-elements | 0,0,0,1 |
需要注意的是,通配符选择器(*)、关系选择器(+,>,~, )和否定伪类(:not())对权重没有影响。而!important
声明的样式具有最高的优先级,它可以覆盖任何其他声明。但是我建议谨慎使用!important,因为它会使 CSS 变得难以维护。
匹配规则
当多个规则应用于同一个元素时,CSS 会按照以下规则来决定
- 权重 如上所述,更高的权重会覆盖更低的权重。
- 特定性 如果权重相同,那么选择器的特定性会决定。例如,
#id .class会覆盖.class。 - 源顺序 如果权重和特定性都相同,那么后定义的规则会覆盖先定义的规则。