Question

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

或两者都是一回事？

Answer 1

继承是关于属性如何从元素渗透到其子元素。某些属性（如font-family）继承。如果您在body上设置了字体系列，则该字体系列将由body中的所有元素继承。 color也是如此，但background或height的情况并非如此，它始终默认为transparent和auto。在大多数情况下，这才有意义。为什么背景会继承？那将是一种痛苦。如果字体没有继承怎么办？甚至会是什么样的？

级联是关于冲突时的优先级。级联规则包括：

以后的属性会覆盖以前的属性
更具体的选择器覆盖不太具体的选择器
指定的属性会覆盖继承的属性

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

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

内联样式具有非常高的特异性（1000）
ID的特异性为100
classes / attributes和伪类添加10
元素和伪元素添加1

添加选择器链中的所有部分以确定总特异性。如果是平局，则最后一个选择器优先。

当然，这有各种边缘案例和警告。无论有多少，一个类总是会覆盖普通元素。更有针对性的选择器优先于父选择器的继承属性。如果有人使用!important，你可以抛弃所有的计算 - 这胜过一切。

Answer 2

要了解继承和级联之间的区别，让我们通过示例来了解两者。

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

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

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

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

如果您想详细了解CSS中的级联，请阅读我有关级联的其他答案。

What is the meaning of "cascading' in CSS?

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

2 个答案: