答案：css层叠是浏览器解决样式冲突的机制，通过来源、重要性、特异性和顺序四个维度决定最终生效的样式；继承则是父元素属性值传递给子元素的过程，两者共同影响元素渲染。
CSS层叠（Cascading）简单来说，就是浏览器在面对多个样式规则都试图影响同一个元素时，如何决定哪个规则最终生效的机制。它是一个优先级判断系统，确保样式应用的一致性，是理解CSS如何工作的基石。
当我们在编写CSS时，经常会遇到同一个元素被多个样式规则“盯上”的情况。比如，一个
div
既有一个类名，又有一个ID，同时它的父元素也定义了样式，甚至浏览器自身也有默认样式。这时候，浏览器就需要一套明确的规则来决定到底听谁的。这套规则，就是CSS的层叠机制。
我个人觉得，理解层叠就像是理解一个复杂的决策过程。它不是简单的“后定义的覆盖先定义的”，而是结合了多个维度进行权衡：
- 来源（Origin）：样式是从哪里来的？是浏览器默认的（User Agent Stylesheet），用户自定义的（User Stylesheet），还是我们开发者写的（Author Stylesheet）？通常，我们写的样式优先级会高于浏览器默认的。
- 重要性（Importance）：有没有
!important
这个“大杀器”？如果一个声明被标记为
!important
，它会大幅提升优先级，甚至凌驾于正常的特异性之上。
- 特异性（Specificity）：这是最核心也最常让人头疼的一点。选择器越具体，它的优先级就越高。比如，id选择器比类选择器特异，类选择器又比元素选择器特异。
- 顺序（Order）：如果以上所有因素都相同，那么最后定义的规则会覆盖前面定义的。这就是我们常说的“后来者居上”。
在我看来，掌握这四个维度，尤其是特异性，能解决大部分CSS样式冲突的困惑。有时候，一个样式不生效，往往不是因为写错了，而是因为有另一个更高优先级的样式在默默地起作用。
立即学习“前端免费学习笔记（深入）”；
CSS层叠与继承有什么区别？
这是一个非常常见的疑问，也是很多初学者容易混淆的地方。在我看来，层叠和继承虽然都关乎样式如何应用，但它们解决的问题和作用的范围是不同的。
层叠（Cascading），就像我们前面提到的，解决的是同一个元素、同一个属性被多个样式规则同时作用时，哪个规则最终生效的问题。它是一个“冲突解决”机制。例如，你给一个
<p>
标签定义了
color: blue;
，又给它所在的类定义了
color: red;
，层叠机制会根据特异性等规则来判断最终是蓝色还是红色。它关注的是“谁拥有最终的决定权”。
继承（Inheritance），则关注的是父元素某些属性的值如何传递给子元素。它是一种“属性传递”机制。很多属性，比如
color
、
font-family
、
font-size
、
text-align
等，默认是会从父元素传递给子元素的。这意味着如果你给
<body>
设置了
font-family: Arial;
，那么页面上大部分文本元素（除非它们自己重新定义了
font-family
）都会继承这个字体。
我们可以这样理解：
- 当一个元素的某个属性没有被自身或更高优先级的规则显式定义时，它会尝试继承父元素的值。
- 如果一个元素的某个属性被多个规则显式定义了，那么层叠机制就会介入，决定哪个规则最终生效。
举个例子：
body { color: blue; font-size: 16px; border: 1px solid black; /* border属性不继承 */ } p { color: red; /* 这里的color会通过层叠覆盖body的color */ }
<body> <p>这是一段文字。</p> <div>这是另一段文字。</div> </body>
-
<p>
标签的
color
最终是红色，因为
p { color: red; }的特异性比
body { color: blue; }高，这是层叠的结果。
-
<p>
标签会继承
body
的
font-size
，所以是16px。
-
<div>
标签的
color
是蓝色，因为它没有自己的
color
定义，所以继承了
body
的
color
。
-
<div>
和
<p>
都不会有边框，因为
border
属性默认不继承。
所以，层叠是关于“选择哪个样式”，而继承是关于“没有选择时，从哪里来”。两者相辅相成，共同决定了元素最终的渲染效果。
如何计算css选择器的特异性（Specificity）？
特异性是CSS层叠规则中最核心，也最容易让人感到困惑的部分。在我看来，它就像一个计分系统，浏览器通过给不同的选择器类型分配“分数”来决定哪个规则更具体、更应该被采纳。理解这个计分规则，能帮助我们预判样式冲突的结果。
特异性的计算通常被描述为四位数的组合，比如
(a, b, c, d)
，或者你可以简单理解为一个权重值：
-
a
：内联样式（Inline Styles）
- 直接写在html元素的
style
属性里的样式，比如
<p style="color: blue;">
。
- 每个内联样式计1分（通常被认为是1000点）。
- 直接写在html元素的
-
b
：ID选择器（ID Selectors）
- 通过
#id
选择的元素。
- 每个ID选择器计100分。
- 通过
-
c
：类选择器（class Selectors）、属性选择器（Attribute Selectors）、伪类（Pseudo-classes）
- 通过
.class
、
[attribute="value"]
、
:hover
、
:first-child
等选择的元素。
- 每个这类选择器计10分。
- 通过
-
d
：元素选择器（Type Selectors）、伪元素（Pseudo-elements）
- 通过
p
、
div
、
::before
、
::after
等选择的元素。
- 每个这类选择器计1分。
- 通过
一些关键点和常见误区：
-
权重累加，但不是简单相加：它不是一个简单的总和。更准确的理解是，
a
的权重最高，
b
次之，
c
再次，
d
最低。一个ID选择器（100分）会永远比10个类选择器（10 10 = 100分）或者100个元素选择器（100 1 = 100分）优先级更高。这是因为比较是从左到右进行的，就像版本号一样。只要高位有值，就比低位的值大。
- 例如：
#id
(0,1,0,0) 总是比
.class.class.class...
(0,0,100,0) 高。
- 再比如：
p p p p p p p p p p p
(11个元素选择器，即0,0,0,11) 的特异性，仍然低于
.my-class
(0,0,1,0)。因为在
c
位，
.my-class
有1，而
p
的组合是0。
- 例如：
-
*通用选择器`
、组合器（
+
,
~
,
>
,
）和否定伪类
:
not()
不增加特异性**：它们只是帮助你构建选择器，但本身不计分。
:
not()
内部的选择器会计算特异性，但
:
not()
本身不加分。
计算示例：
| 选择器 | 特异性 (a, b, c, d) | 权重分数 | 说明 |
|---|---|---|---|
| @@######@@ | (0, 0, 0, 1) | 1 | 1个元素选择器 |
| @@######@@ | (0, 0, 0, 2) | 2 | 2个元素选择器 |
| @@######@@ | (0, 0, 1, 0) | 10 | 1个类选择器 |
| @@######@@ | (0, 0, 1, 1) | 11 | 1个类选择器 + 1个元素选择器 |
| @@######@@ | (0, 0, 1, 0) | 10 | 1个属性选择器 |
| @@######@@ | (0, 0, 1, 0) | 10 | 1个伪类 |
| @@######@@ | (0, 1, 0, 0) | 100 | 1个ID选择器 |
| @@######@@ | (0, 1, 0, 1) | 101 | 1个ID选择器 + 1个元素选择器 |
| @@######@@ | (0, 1, 1, 1) | 111 | 1个ID选择器 + 1个类选择器 + 1个元素选择器 |
| @@######@@ | (1, 0, 0, 0) | 1000 | 内联样式 |
| @@######@@ | 无 | 超越一切 | @@######@@不计入特异性，但它能强制覆盖所有正常的特异性规则。它的优先级在特异性计算完成后再介入，所以通常被认为比任何特异性都高（除了用户@@######@@和浏览器@@######@@）。请谨慎使用。 |
理解特异性，能让你在调试CSS时更有方向，也能帮助你写出更可预测、更易维护的样式代码。当样式不生效时，我的第一反应就是去检查是否存在更高特异性的选择器在捣乱。
当CSS规则冲突时，
p
p
声明如何影响优先级？
li a
声明在CSS层叠规则中是一个非常特殊的存在，它就像一个“超级英雄”，拥有能够打破常规特异性规则的能力。在我看来，它既是解决燃眉之急的工具，也常常是导致CSS代码难以维护的“罪魁祸首”，所以使用时需要极其谨慎。
当一个css属性值后面跟着
.class
关键字时，它会显著提升该声明的优先级，使其能够覆盖掉其他所有不带
p.class
的声明，无论这些声明的特异性有多高。
[type="text"]
的优先级层级（从高到低）：
- 用户样式表中的
:hover
声明
：这是用户通过浏览器扩展或自定义设置的样式，带有#id
。
- 作者样式表中的
#id p
声明
：这是我们开发者在自己的CSS文件中添加的，带有div #id .class
。
- 作者样式表中的普通声明：我们自己写的，没有
<p style="color: red;">
的常规CSS规则，它们的优先级由特异性和顺序决定。
- 用户样式表中的普通声明：用户自定义的普通样式。
- 浏览器默认样式表（User Agent Stylesheet）：浏览器自带的默认样式。
这意味着，我们作为开发者在自己的样式表中使用的
!important
，可以覆盖任何常规的作者样式，甚至包括特异性极高的ID选择器或内联样式（如果它们没有
!important
）。
示例：
!important
!important
尽管
!important
的特异性（100）远高于
!important
（10），但由于
!important
带有
!important
，最终文字的颜色会是红色。如果没有
!important
，文字将是蓝色。
何时使用
!important
？
- 调试：在快速测试或临时覆盖某个样式时，
!important
非常方便。
- **覆盖第三方库样式
!important
!important
!important
!important
!important
/* style.css */ #my-element { color: blue; /* 特异性100 */ } .highlight { color: red !important; /* 特异性10，但有!important */ } /* 另一个规则 */ div { color: green; /* 特异性1 */ }
<div id="my-element" class="highlight">这段文字会是什么颜色？</div>
#my-element
.highlight
.highlight
!important
!important
!important
!important
评论（已关闭）
评论已关闭