In CSS, what is the difference between cascading and inheritance?
在CSS中，级联和继承有什么区别？
Or are both the same thing?
或者两者都是一回事？
1 个解决方案
#1
27
Inheritance is about how properties trickle down from an element to its children. Certain properties, like font-family inherit. If you set a font-family on the body, that font family will be inherited by all the elements within the body. The same is true for color, but it is not true for background or height which will always default to transparent and auto. In most cases this just makes sense. Why would the background inherit? That would be a pain. What if fonts didn't inherit? What would that even look like?
继承是关于属性如何从一个元素渗透到它的子元素。某些属性，如font-family继承。如果在主体上设置font-family，则该字体系列将由主体内的所有元素继承。对于颜色也是如此，但背景或高度并非如此，它总是默认为透明和自动。在大多数情况下，这才有意义。为什么背景会继承？那将是一种痛苦。如果字体没有继承怎么办？甚至会是什么样的？
The cascade is about what take precedence when there is a conflict. The rules of the cascade include:
级联是关于在发生冲突时优先考虑的事项。级联规则包括：
- Later properties override earlier properties
- 以后的属性会覆盖早期属性
- More specific selectors override less specific selectors
- 更具体的选择器覆盖不太具体的选择器
- Specified properties override inherited properties
- 指定的属性会覆盖继承的属性
And so on. The cascade solves any conflict situations. It is the order in which properties are applied.
等等。级联解决了任何冲突情况。它是应用属性的顺序。
(update) Specificity is the calculation used to determine selector priority in the cascade. When two selectors apply to the same element, the one with higher specificity takes precedence.
（更新）特异性是用于确定级联中的选择器优先级的计算。当两个选择器应用于同一元素时，具有较高特异性的元素优先。
- Inline styles have a very high specificity (
1000) - 内联样式具有非常高的特异性（1000）
- ID's have a specificity of
100 - ID的特异性为100
- classes/attributes and pseudo-classes add
10 - classes / attributes和pseudo-class加10
- elements and pseudo-elements add
1 - 元素和伪元素加1
Add up all the parts in a selector chain to determine the total specificity. In case of a tie, the last selector takes precedence.
将选择器链中的所有部分相加以确定总体特异性。如果是平局，则最后一个选择器优先。
Of course, that comes with various edge-cases and caveats. One class will always override plain elements, no matter how many. More targeted selectors are given priority over inherited properties from parent selectors. And you can throw out all your calculations if someone used !important — that trumps everything.
当然，这带来了各种边缘案例和警告。无论有多少，一个类总是会覆盖普通元素。更有针对性的选择器优先于父选择器的继承属性。如果有人使用，你可以扔掉所有的计算！重要 - 这胜过一切。
#1
27
Inheritance is about how properties trickle down from an element to its children. Certain properties, like font-family inherit. If you set a font-family on the body, that font family will be inherited by all the elements within the body. The same is true for color, but it is not true for background or height which will always default to transparent and auto. In most cases this just makes sense. Why would the background inherit? That would be a pain. What if fonts didn't inherit? What would that even look like?
继承是关于属性如何从一个元素渗透到它的子元素。某些属性，如font-family继承。如果在主体上设置font-family，则该字体系列将由主体内的所有元素继承。对于颜色也是如此，但背景或高度并非如此，它总是默认为透明和自动。在大多数情况下，这才有意义。为什么背景会继承？那将是一种痛苦。如果字体没有继承怎么办？甚至会是什么样的？
The cascade is about what take precedence when there is a conflict. The rules of the cascade include:
级联是关于在发生冲突时优先考虑的事项。级联规则包括：
- Later properties override earlier properties
- 以后的属性会覆盖早期属性
- More specific selectors override less specific selectors
- 更具体的选择器覆盖不太具体的选择器
- Specified properties override inherited properties
- 指定的属性会覆盖继承的属性
And so on. The cascade solves any conflict situations. It is the order in which properties are applied.
等等。级联解决了任何冲突情况。它是应用属性的顺序。
(update) Specificity is the calculation used to determine selector priority in the cascade. When two selectors apply to the same element, the one with higher specificity takes precedence.
（更新）特异性是用于确定级联中的选择器优先级的计算。当两个选择器应用于同一元素时，具有较高特异性的元素优先。
- Inline styles have a very high specificity (
1000) - 内联样式具有非常高的特异性（1000）
- ID's have a specificity of
100 - ID的特异性为100
- classes/attributes and pseudo-classes add
10 - classes / attributes和pseudo-class加10
- elements and pseudo-elements add
1 - 元素和伪元素加1
Add up all the parts in a selector chain to determine the total specificity. In case of a tie, the last selector takes precedence.
将选择器链中的所有部分相加以确定总体特异性。如果是平局，则最后一个选择器优先。
Of course, that comes with various edge-cases and caveats. One class will always override plain elements, no matter how many. More targeted selectors are given priority over inherited properties from parent selectors. And you can throw out all your calculations if someone used !important — that trumps everything.
当然，这带来了各种边缘案例和警告。无论有多少，一个类总是会覆盖普通元素。更有针对性的选择器优先于父选择器的继承属性。如果有人使用，你可以扔掉所有的计算！重要 - 这胜过一切。