CSS 核心机制：层叠、继承与优先级
在 CSS 开发中，理解样式如何应用是排错的关键。这主要取决于三个核心机制：层叠性、继承性和优先级。
1. 层叠性：样式冲突的处理
层叠性指的是多种 CSS 样式在同一元素上的叠加效果。当出现冲突时，浏览器遵循'就近原则'——即离 DOM 结构更近的样式通常具有更高的执行权。当然，如果样式本身不冲突，它们会自然共存，不会互相覆盖。
2. 继承性：代码简化的利器
继承允许子元素自动获取父元素的某些样式属性。这不仅减少了重复代码，也降低了维护复杂度。
常见的可继承属性包括以 text-、font-、line- 开头的属性，以及 color 等。但要注意，并非所有属性都支持继承，布局相关的属性通常不可继承。
3. 优先级：决定最终样式
当多个选择器同时作用于一个元素时，优先级决定了谁的样式生效。我们可以将权重看作一种计分系统：
- 通配符或继承：权重为 0
- 标签选择器：权重为 1
- 类选择器或伪类：权重为 10
- ID 选择器：权重为 100
- 行内样式表：权重为 1000
- !important：权重最高（视为无穷大）
值得注意的是，权重是可以叠加的。例如使用交集选择器或后代选择器时，基础选择器的权重会累加。 计算示例如下（格式为：行内，ID，类，标签）：
div ul li→ 0, 0, 0, 3.nav ul li→ 0, 0, 1, 2a:hover→ 0, 0, 1, 1.nav a→ 0, 0, 1, 1
优先级实战案例
下面是一个具体的场景，展示了嵌套选择器如何影响最终渲染结果：
/* 双重 div 选择器，权重更高 */
div div {
color: blue;
}
/* 单层 div 选择器，权重较低 */
div {
color: red;
}
<body>
<div>
<div>
<div>
文本内容
</div>
</div>
</div>
