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

Question

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

还是两者是一回事？

Answer 1

继承 是关于属性如何从一个元素滴落到它的子元素。某些属性，如 font-family 继承。如果您在 body 上设置字体系列，则该字体系列将被 body 中的所有元素继承。 color 也是如此，但 background 或 height 则不然，它们始终默认为 transparent和自动。在大多数情况下，这是有道理的。为什么后台会继承？那会很痛苦。如果字体没有继承怎么办？那会是什么样子？

级联 是关于在发生冲突时优先考虑什么。级联的规则包括:

1. 后面的属性覆盖前面的属性
2. 更具体的选择器覆盖不太具体的选择器
3. 指定的属性覆盖继承的属性

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

---

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

1. 内联样式具有非常高的特异性(1000)
2. ID 的特异性为 100
3. 类/属性和伪类加 10
4. 元素和伪元素加1

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

当然，这伴随着各种边缘情况和警告。一个类将始终覆盖普通元素，无论有多少。更具针对性的选择器优先于从父选择器继承的属性。如果有人使用 !important，您可以放弃所有计算 — 这胜过一切。