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

Question

我很难向CSS新手解释使用样式表时级联的工作原理。无论出于何种原因，新手似乎自然而然地只是在每个元素中添加一个类。例如，从this question获取代码片段（对OP没有任何攻击，翻过来）。

执行此操作：ul#nav { }和ul#nav li { }
优于：ul.nav { }和li.navLinks { }

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

我曾尝试使用semantics作为参考点，但事实并未证明这是有效的。由于OOP的先验知识，术语“类”很可能是侵入/混淆。最终，经过良好的榜样看到了良好的榜样，他们总是有一个突破性的时刻，他们终于“得到它”。但是，我正在寻找一种简化这一过程的方法，因为我不想成为那些不得不回过头来维持这种易于生产的副产品的人。

我特别喜欢解释递归的this answer。我在学校的时候有一个类似的解释，我立即“明白了”。我希望那里的人有一种类似的方式来解释级联，但是很彻底。

Answer 1

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

Answer 2

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

理解CSS Cascade的真正困难在于它包含 足够的Rube Goldberg功能可以破坏任何功能 单一的统一原则，能够为学生“开灯”。永远都有 将成为黑暗与理解之间的一些WTF。

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

从纯HTML文档开始，添加一些简单的CSS，找出发生的事情和原因， 添加一些东西，搞清楚，添加一些东西，弄明白......我可以看到它。

Answer 3

对我来说..当你从右到左阅读时很容易理解css：

div#nav li:hover a

我将其翻译为：

FOR ALL “links” INSIDE A “li”已经悬停它位于 div < strong> WITH id = nav DO THIS {....

Answer 4

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

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