如何向 CSS 新手解释“级联”？答案

【问题标题】：How to explain the "Cascade" to CSS newbies?如何向 CSS 新手解释“级联”？
【发布时间】：2011-03-30 04:29:54
【问题描述】：

我很难向不熟悉 CSS 的人解释在使用样式表时级联是如何工作的。无论出于何种原因，新手似乎很自然地开始只是为每个元素添加一个类。以this question 中的代码 sn-p 为例（无意冒犯 OP，overtherainbow）。

这样做： ul#nav { } 和 ul#nav li { }
优于：ul.nav { }和li.navLinks { }

这是一个非常基本的例子，但你明白了。在这种情况下使用继承显然是有益的。

我曾尝试使用semantics 作为参考点，但尚未证明有效。由于对 OOP 的先验知识，“类”这个词很可能会引起/混淆。最终，在看到一个又一个好榜样之后，他们总有一个突破的时刻，他们终于“得到它”。但是，我正在寻找一种方法来简化这个过程，因为我不想成为必须回去维护这种滑入生产的分类副产品的人。

我特别喜欢 this answer，它解释了递归。我上学的时候也有过类似的解释，立马就“明白”了。我希望那里的聪明人有类似的方法来简洁而彻底地解释级联。

【问题讨论】：

【解决方案1】：

将 CSS Cascade 描述为与 DOM 层次结构正交的层次结构可能会有所帮助。两个层次结构在显示元素处相遇。 DOM 给出结构嵌套，CSS 给出显示属性嵌套。 CSS 只是用于描述显示属性层次结构的语言。

理解 CSS Cascade 的真正困难在于它包含足够的Rube Goldberg 功能可以毁掉任何能够为您的学生“开灯”的单一统一原则。总有在黑暗和理解之间会有一些WTF。

我能想到的对CSS级联最好的描述和解释来了来自www.w3.org Cascade。我只是推荐一遍又一遍地阅读，直到调光开关被推到足够高以至少“看到光”。

从一个普通的 HTML 文档开始，添加一些简单的 CSS，弄清楚发生了什么以及为什么，添加一些东西，弄清楚，添加一些东西，弄清楚......我可以看到光。

【讨论】：

【解决方案2】：

对我来说.. 从右到左阅读 css 很容易理解，例如：

div#nav li:hover a

我会把它翻译成：

FOR ALL“链接”INSIDE A“li”有悬停在 Adiv 使用 id=nav 这样做{ ....

【讨论】：

【解决方案3】：

您可以尝试让您的学生/学生/您教的人尝试创建一个有点高级的布局，而不使用任何班级或 ID 属性。

关于级联的一个关键点是您应该充分利用 HTML 文档的 DOM 树。此外，级联的一点是您可以将多种样式应用于一个元素，因此其生成的样式为style a + style b + style c。

【讨论】：

【解决方案4】：

也许您可以从一开始就忽略 id 和 class 开始。只是做“愚蠢”的事情，比如根据层次结构来处理非常具体的元素。然后解释分组和标签，并将它们组合起来？

【讨论】：