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

Question

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

或者都是一样的东西？

Answer 1

继承是关于属性如何从元素滴落到其子元素。某些属性，如font-family继承。如果您在body上设置字体系列，则该字体系列将被body中的所有元素继承。对于color也是如此，但对于background或height而言并非如此，其总是默认为transparent和auto。在大多数情况下，这是有道理的。为什么背景会继承？这将是一个痛苦。如果字体没有继承，该怎么办？甚至会是什么样子？

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

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

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

---

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

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

特异性

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

当然，这是伴随着各种边缘情况和警告。无论有多少人，一个班级总是会覆盖纯素。与父代选择器的继承属性相比，更有针对性的选择器优先。如果有人使用!important，那么你可以抛出所有的计算结果 - 胜过一切。