在CSS中，级联和继承有什么区别？

在CSS中，级联和继承有什么区别

---

或者两者是同一件事？

继承是关于属性如何从一个元素流到它的子元素。某些属性，如

font-family

inherit。如果在

正文

上设置字体系列，则该字体系列将由

正文

中的所有元素继承。这同样适用于

颜色

，但不适用于

背景

或

高度

，后者将始终默认为

透明

和

自动

。在大多数情况下，这是有道理的。为什么背景会继承？那将是一种痛苦。如果字体没有继承呢？那会是什么样子

级联是关于发生冲突时优先考虑的内容。级联的规则包括：

以后的属性覆盖以前的属性

更具体的选择器会覆盖不太具体的选择器

指定的属性覆盖继承的属性

等等。级联解决任何冲突情况。它是应用属性的顺序

---

（更新）特异性用于确定级联中的选择器优先级。当两个选择器应用于同一元素时，具有较高特异性的选择器优先

内联样式具有非常高的特异性（

1000

）

ID的特异性为

100

类/属性和伪类添加

10

元素和伪元素添加

1

将选择器链中的所有部分相加，以确定总的特异性。在平局的情况下，最后一个选择器优先

---

当然，这有各种各样的边缘案例和警告。一个类总是覆盖普通元素，不管有多少个。更多目标选择器的优先级高于从父选择器继承的属性。如果有人使用了

，你可以扔掉所有的计算！重要信息

-这胜过一切。

要理解继承和级联之间的区别，让我们通过示例来理解它们

继承是一种将属性值从父元素传播到其子元素的方法，这里有一个非常简单的示例

.parent{
font-size:20px;
line-height:150%;
}
.child{
font-size:25px;
}

从上面的示例中，我们将确定子元素的线高度。我们都知道，每个CSS属性都必须有一个值，即使我们、开发人员和浏览器都没有指定它。在这种情况下，没有级联值，对吗？因此，当处理某个元素的某个属性时，例如行高，CSS引擎询问的第一个问题是是否存在级联值，如果是，那么当然，这就是所使用的值。现在，如果没有级联值，那么下一个问题是属性是否可以继承，这取决于每个属性，有些属性是继承的，有些则不是。就行高而言，该属性将被继承，正如我们从属性规范中看到的那样

因此，如果继承了一个属性，那么该属性的值将成为其父元素的计算值。需要注意的是，继承的值不仅仅是150%，而是计算值。在这种情况下，这是20像素的150%，也就是30像素。因此子元素的行高也将是30像素，而不是25像素字体大小的150%。现在，如果它是一个没有继承的属性，例如padding，那么指定的值将成为初始值，它也是每个属性的特定值。在填充的情况下，这只是零像素

现在的层叠是一个组合不同样式表的过程，当多个规则应用于某个元素时，解决不同CSS规则和声明之间的冲突。因为您可能已经知道，某些样式属性（如字体大小）的声明可以出现在多个样式表中，也可以出现在单个样式表中多次

如果您想详细阅读CSS中的级联，请阅读我关于级联的另一个答案

---

另请参见。级联的特殊性质是区别于继承的一个关键因素。这些值是用于说明的，还是真正的规范定义的值，因此[丑陋]选择器

#x#x#x#x#x#x#x#x#x#x#x#x

将覆盖内联样式（因为11x10=110>100）？这是一个非常好的问题。大多数文章暗示它将按照您建议的方式工作，但这似乎不是真的：-据我所知，没有多少属性可以覆盖类，没有多少类可以覆盖ID，没有多少ID可以覆盖内联样式。这不是一个完美的10进制数学，数字不会从一列滚动到下一列。