CSS层叠
CSS层叠
CSS 层叠（Cascading）是浏览器解决样式冲突的核心机制，决定了多个 CSS 规则同时作用于同一元素时，最终哪些样式会生效。 、
CSS层叠的原则如下：
- 优先级：
当多个规则选择器都适用于同一个元素时，选择器的优先级决定了哪个规则的样式将被应用。有优先级从高到低的顺序为 ：
| 优先级 | |
|---|---|
!important 声明 | 具有最高优先级 |
内联样式（如 style="..."） | 此高优先级 |
| ID 选择器 | 高优先级 |
| 类/属性/伪类选择器 | 中等优先级 |
| 元素/伪元素选择器 | 低优先级 |
| 通配符（*）和继承的样式 | 最低优先级 |
- 顺序
当具有相同优先级的规则应用到同一个元素时，后定义的规则将覆盖先定义的规则 - 继承
某些属性具有继承性，会从父元素传递给子元素 。子元素会继承父元素的样式，但后续对子元素应用的样式可以覆盖继承的样式。
通过这些原则，CSS层叠机制可以确保样式的应用具有可预测性和灵活性。
<!DOCTYPE html>
<html>
<head><title>CSS层叠示例</title><style>/* 规则1：元素选择器（最低优先级） */p {color: blue; /* 会被更具体的选择器覆盖 */}/* 规则2：类选择器 + 元素选择器（优先级: 0,0,1,1） */.container p {color: red; /* 覆盖上面的 p 元素选择器 */}/* 规则3：ID选择器（优先级: 0,1,0,0） */#special {color: green; /* 被下面更具体的组合选择器覆盖 */}/* 规则4：类选择器 + ID选择器（优先级: 0,1,1,0） */.container #special {color: orange; /* 最高优先级，最终生效 */}</style>
</head>
<body><div class="container"><p>This is a paragraph.（显示红色）</p><p id="special">This is a special paragraph.（显示橙色）</p></div>
</body>
</html>