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

Posted 2023-02-24

【中文标题】如何向 CSS 新手解释“级联”？

【英文标题】：How to explain the "Cascade" to CSS newbies?

【发布时间】：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，它解释了递归。我上学的时候也有过类似的解释，立马就“明白”了。我希望那里的聪明人有类似的方法来简洁而彻底地解释级联。

【问题讨论】：

我更喜欢内联元素的样式。我没有时间学习所有这些 CSS 巫术。

ChaosPandion：我希望你在开玩笑；）那就像没有函数的编程；）

@nicomen - 功能？ :)

函数适用于那些头脑无法处理使用 goto 的单一、无功能的 40,000 行程序的复杂性。

【参考方案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 开始。只是做“愚蠢”的事情，比如根据层次结构来处理非常具体的元素。然后解释分组和标签，并将它们组合起来？

【讨论】：

我们中间慢的一两个例子怎么样(me)。