CSS级联与示例答案

【问题标题】：CSS cascading with examplesCSS级联与示例
【发布时间】：2012-06-29 02:56:57
【问题描述】：

请有人举一个例子来描述 CSS 中的级联，它们什么时候有用？我已经看到描述 cascading 的答案以及 cascading and inheritance 之间的区别，但我没有看到任何描述 CSS Cascading 的答案示例。

【问题讨论】：

【解决方案1】：

关于继承与级联：

“继承是一种与级联分离的机制：继承适用于DOM（文档对象模型）树，而级联处理样式表规则。但是，通过级联设置在元素上的CSS属性可以被继承通过该元素的子元素。” - http://reference.sitepoint.com/css/inheritance

【讨论】：

【解决方案2】：

当只考虑“作者”样式表（而不是用户或用户代理）时，您可能感到困惑的不是“级联”，而是 CSS 的“特异性”规则。

以下是关于特异性如何工作以及如何弄清楚为什么将某些规则应用于您的元素的一些很好的解释：

编辑：级联：收集一个元素的所有适用规则，然后根据其来源进行排序（数字越大表示优先级越高）：

如果原点相同，则将特异性用作决胜局。最后，如果特异性相同，则声明顺序是最后的决胜局。希望没有繁琐的例子就可以理解...

【讨论】：

+1 特异性是构成级联的特定组件之一。（不是故意的双关语。我发誓。）
@Steve H 感谢您的链接。这两个链接对特异性都有很好的解释，根据 BoltClock 只是级联的组成部分之一。我很想知道其他组件是什么。这就是为什么我还没有将您的答案设置为已接受的原因。
@BoltClock 构成级联的其他组件是什么？