CSS 选择器优先级与继承规则详解
在编写 CSS 时，理解选择器的优先级和继承规则是至关重要的。它们决定了样式如何应用到 HTML 元素上，尤其是在多个样式规则冲突时。本文将详细介绍 CSS 选择器的优先级和继承规则，帮助你更好地掌握样式的应用机制。
CSS 选择器优先级
CSS 选择器的优先级是通过权重来计算的。当多个选择器匹配同一个元素时，浏览器会根据优先级规则决定应用哪个样式。优先级从高到低依次为：
1. !important（最高优先级）
!important是一个特殊的声明，它可以覆盖所有其他优先级规则。- 它并不是选择器的一部分，而是直接写在样式声明中。
- 注意：
!important应该谨慎使用，因为它会破坏 CSS 的自然优先级规则，导致样式难以维护。
示例：
p {
color: blue !important; /* 优先级最高 */
}
#myId p {
color: red; /* 即使 ID 选择器权重高，也会被 !important 覆盖 */
}
2. 内联样式（权重：1000）
- 直接在 HTML 元素的
style属性中定义的样式。 - 内联样式的优先级仅次于
!important。
示例：
<p style="color: green;">这是绿色文字</p>
3. ID 选择器（权重：100）
- 使用
#定义的 ID 选择器。 - ID 选择器的优先级高于类选择器和元素选择器。
示例：
#myId {
color: blue;
}
4. 类选择器、属性选择器、伪类（权重：10）
- 类选择器：
.className - 属性选择器：
[type="text"] - 伪类：
:hover、:nth-child()等
示例：
.myClass {
color: green;
}
[type="text"] {
border: 1px solid red;
}
a:hover {
color: purple;
}
5. 元素选择器、伪元素（权重：1）
- 元素选择器：
div、p等 - 伪元素：
::before、::after等
示例：
p {
color: black;
}
div::before {
content: "前缀";
}
6. 通用选择器（权重：0）
- 通用选择器
*的优先级最低，不会影响优先级计算。
示例：
* {
margin: 0;
}
7. 继承的样式（无权重）
- 继承的样式没有权重，优先级最低。
- 如果子元素没有显式定义样式，则会继承父元素的样式。
示例：
div {
color: blue; /* 父元素样式 */
}
p {
/* 如果没有定义样式，p 会继承 div 的 color: blue */
}
优先级计算规则
当多个选择器匹配同一个元素时，浏览器会计算它们的权重，权重高的样式会被应用。权重计算方式如下：
- 将选择器的各个部分（内联、ID、类、元素）的权重相加，得到一个总权重。
- 权重高的样式优先。
示例：
#myId .myClass p {
color: red; /* 权重：100 (ID) + 10 (类) + 1 (元素) = 111 */
}
div p {
color: blue; /* 权重：1 (元素) + 1 (元素) = 2 */
}
在这个例子中，#myId .myClass p 的权重更高，因此文字会显示为红色。
总结
| 规则 | 说明 |
|---|---|
!important |
最高优先级，覆盖所有其他规则 |
| 内联样式 | 权重：1000 |
| ID 选择器 | 权重：100 |
| 类/属性/伪类 | 权重：10 |
| 元素/伪元素 | 权重：1 |
| 通用选择器 | 权重：0 |
| 继承的样式 | 无权重，优先级最低 |
通过理解这些规则，你可以更好地控制 CSS 样式的应用，避免样式冲突和意外行为。希望这篇博客能帮助你更深入地掌握 CSS 选择器的优先级和继承规则！
标签：优先级,权重,样式,元素,选择器,CSS From： https://www.cnblogs.com/itcq1024/p/18678537