如何解釋CSS級新手？

Question

我很難向剛接觸CSS的人解釋使用樣式表時級聯如何工作。無論出於何種原因，新手似乎都是通過向每個元素添加一個類來自然開始的。舉例來說，this question中的代碼片段（沒有任何違反OP的規定，也沒有任何違規行爲）。

這樣做：      ul#nav { }和ul#nav li { }
優於：ul.nav { }和li.navLinks { }

這是一個非常簡單的例子，但你明白了吧。在這種情況下使用繼承顯然是有益的。

我曾嘗試使用semantics作爲參考點，但這並未證明是有效的。由於先前的面向對象的知識，「類」這個術語很可能會造成混淆/混淆。最終，在經過良好的榜樣看到好榜樣之後，他們總是有最終獲得它的突破時刻。但是，我正在尋找一種簡化這一過程的方法，因爲我不想成爲那些不得不退居並維護這種副產品的人，這種副產品會滑入生產。

我特別喜歡this answer，它解釋了遞歸。當我在學校時，我有一個類似的解釋，我立即「知道了」。我希望在那裏有一個輝煌的人有一個類似的方式來緩慢而徹底地解釋級聯。

Answer 1

也許你可以從一開始就忽略id和class。只是做「愚蠢」的事情，如根據層次結構處理非常具體的元素。然後解釋分組和標籤，並將它們結合起來？

Answer 2

您可以嘗試讓您的學生/學生/您教授的人嘗試創建一個稍微高級的佈局，而不使用任何類別或ID屬性。

關於級聯的一個關鍵點是，您應該利用DOM樹HTML文檔是最充分的。此外，級聯的一點是，您可以將多種樣式應用於元素，以便生成的樣式爲style a + style b + style c。

Answer 3

我..其容易當你從右讀它向左想了解一個css：

div#nav li:hover a 

我會翻譯成：

FOR ALL 「鏈接」 內部的 「裏」 具有懸停是內部的 DIV WITH ID = NAV 要這樣做{....

Answer 4

它可能有助於描述和查看CSS級聯作爲與DOM層級正交的層級。 這兩個層次結構在顯示元素處相遇。 DOM給出結構嵌套，CSS給出嵌套的顯示屬性 。 CSS只是用來描述顯示屬性層次結構的語言。

理解CSS層疊真正的困難在於，它含有足夠 功能Rube Goldberg毀能夠爲您的學生「上的燈打開」的任何 單一的統一原則。在黑暗和理解之間總會有幾個WTF。

我能想到的CSS級聯的最佳描述和解釋來自www.w3.org Cascade來自 。我一直推薦 一遍又一遍地讀取，直到調光器開關被推高到至少「看到光」爲止。

從一個簡單的HTML文檔開始，添加一些簡單的CSS，找出發生了什麼，爲什麼，添加一些東西，找出它，添加一些東西，找出它......我可以看到燈光。