【发布时间】：2020-07-14 19:52:00
【问题描述】：
在 CSS 中，级联和继承有什么区别？
或者两者是一样的？
【问题讨论】：
-
另见 Calculating a selector's specificity。级联的特定性质是与继承相比的关键区别。
标签： css
【发布时间】：2020-07-14 19:52:00
【问题描述】：
继承是关于属性如何从一个元素向下传递到它的子元素。某些属性，例如 font-family 继承。如果您在body 上设置字体系列，则该字体系列将被body 中的所有元素继承。 color 也是如此，但 background 或 height 并非如此，它们将始终默认为 transparent 和 auto。在大多数情况下，这是有道理的。为什么背景会继承？那会很痛苦。如果字体没有继承怎么办？那会是什么样子？
级联是关于发生冲突时优先处理的内容。级联的规则包括：
- 以后的属性会覆盖以前的属性
- 更具体的选择器会覆盖不太具体的选择器
- 指定的属性会覆盖继承的属性
等等。级联解决了任何冲突情况。这是应用属性的顺序。
(update) Specificity 是calculation，用于确定级联中的选择器优先级。当两个选择器应用于同一个元素时，具有更高特异性的选择器优先。
- 内联样式具有非常高的特异性 (
1000) - ID 的特异性为
100 - 类/属性和伪类添加
10 - 元素和伪元素添加
1
将选择器链中的所有部分相加以确定总特异性。如果出现平局，则最后一个选择器优先。
当然，这伴随着各种极端情况和警告。一个类总是会覆盖普通元素，不管有多少。更有针对性的选择器优先于从父选择器继承的属性。如果有人使用了 !important，你可以扔掉所有的计算——这胜过一切。
【讨论】：
-
这些值是为了说明目的，还是它们是真正的规范定义的值，所以 [丑陋] 选择器
#x#x#x#x#x#x#x#x#x#x#x会覆盖内联样式（因为 11x10 = 110 > 100）？ -
这是一个非常好的问题。大多数文章暗示它会按照您建议的方式工作，但这似乎不是真的：codepen.io/mirisuzanne/pen/LyxqmM - 据我所知，没有多少属性可以覆盖一个类，没有多少类可以覆盖一个 ID，并且没有多少 ID 可以覆盖内联样式。这不是完美的以 10 为底的数学运算，而且数字不会从一列滚动到下一列。
要了解继承和级联之间的区别，让我们通过示例来了解它们。
继承是一种将属性值从父元素传播到子元素的方式，我们在这里举一个非常简单的例子。
.parent{
font-size:20px;
line-height:150%;
}
.child{
font-size:25px;
}
从上面的例子中，我们将确定子元素的 line-height 是多少。我们都知道每个 CSS 属性都必须有一个值，即使我们、开发人员和浏览器都没有指定它。在那种情况下，没有级联值，对吧？因此，当处理某个元素的某个属性时，例如 line-height，CSS 引擎询问的第一个问题是是否存在级联值，如果有，那么当然就是使用的值。现在，如果没有级联值，那么下一个问题是该属性是否可以被继承，这取决于每个属性，有些属性可以继承，而另一些则不能。在 line-height 的情况下，该属性被继承，正如我们从属性规范中看到的那样。
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
因此，如果一个属性被继承，那么该属性的值将成为其父元素的计算值。需要注意的是，继承的值不仅仅是 150%，而是计算值。在这种情况下，这是 20 像素的 150%，即 30 像素。所以子元素的 line-height 也将是 30 像素，而不是 25 像素字体大小的 150%。现在，如果它是一个不被继承的属性，例如填充，那么指定的值将成为每个属性特定的初始值。在填充的情况下，这只是零像素。
现在层叠是组合不同样式表并解决不同 CSS 规则和声明之间的冲突的过程，当多个规则适用于某个元素时。因为您可能已经知道某个样式属性（如字体大小）的声明可以出现在多个样式表中，也可以在一个样式表中出现多次。
如果您想详细了解 CSS 中的级联，请阅读我关于级联的其他答案。
【讨论】：