探究 CSS 选择器优先级：解开样式权重的谜团

2024-02-02 05:38:29

在 CSS 的世界中，选择器优先级决定了样式的权重，进而影响元素最终呈现的方式。 memahami CSS 选择器优先级的运作原理，对于理解 CSS 级联规则和元素样式的继承至关重要。

CSS 选择器优先级规则

CSS 选择器优先级由以下四个方面决定：

选择器类型 ：不同类型的选择器具有不同的优先级。
- 内联样式：具有最高优先级。
- ID 选择器：次于内联样式，但高于其他类型选择器。
- 类选择器：再次之，但高于元素选择器和通配符选择器。
- 元素选择器：低于类选择器，但高于通配符选择器。
- 通配符选择器：具有最低优先级。
选择器特异性 ：选择器特异性是指选择器匹配元素的程度，特异性越高，优先级越高。
- ID 选择器具有最高的特异性，其次是类选择器、元素选择器和通配符选择器。
- 如果选择器包含多个部分，则特异性由所有部分的总和决定。
- 例如，.container .box具有比.box更高的特异性，因为.container .box不仅匹配.box元素，还匹配其父元素.container。
继承：元素从其父元素继承样式，继承的样式具有较低的优先级。
- 元素的样式由其自己的样式表、继承的样式表和浏览器默认样式表共同决定。
- 浏览器默认样式表具有最低优先级，继承的样式表次之，元素自己的样式表具有最高优先级。
级联：当多个样式规则匹配同一个元素时，级联规则决定哪个样式规则被应用。
- 最后出现的样式规则具有最高的优先级。
- 如果两个样式规则具有相同的优先级，则根据来源决定哪个样式规则被应用，内联样式优先，其次是元素样式表，然后是继承的样式表和浏览器默认样式表。

示例

以下示例展示了 CSS 选择器优先级的实际应用：

/* 内联样式 */
<p style="color: red;">Hello World</p>

/* ID 选择器 */
#container {
  color: blue;
}

/* 类选择器 */
.box {
  color: green;
}

/* 元素选择器 */
p {
  color: black;
}

/* 通配符选择器 */
* {
  color: gray;
}