CSS規范并沒有明確瀏覽器如何去實現樣式系統,僅僅是說明了它們必須這樣做。有鑒于此,不同的樣式系統引擎可能會擁有完全不同的表現和行為,特別是 Gecko 與 WebKit, 這兩個引擎都是開源項目,實現了類似的算法,具有極其相近的優缺點。因此下面介紹的小技巧對于真實世界的 Web 文檔將會十分有用。
第一部分內容綜合討論了常見的樣式系統是如何分類規則的。接下來的部分包含了書寫規則的指南,它利用了前面討論的樣式系統的優點。
樣式系統如何拆分規則
樣式系統將規則拆分成四個主要類別:
1.ID 規則
2.Class 規則
3.標簽規則
4.通用規則
理解這些分類是十分關鍵的,因為它們是構建規則匹配塊的基礎。
我在下面的段落中使用術語 關鍵選擇器(key selector)。選擇器的最后面的部分即為關鍵選擇器(即用來匹配目標元素的那部分,而不是該元素的祖先元素)。
例如,在下面規則中…
關鍵選擇器為 img、 p 和 title.
ID 規則
這第一個類別包含了那些將 ID 選擇器作為關鍵選擇器的規則。
示例
Class 規則
如果一個規則將一個 class 明確作為它的關鍵選擇器,那么它就屬于該類別。
示例
標簽規則
如果既沒有 class 也沒有 ID 來明確作為關鍵選擇器,那么接下來的候選者就是 標簽 類別。 如果一條規則將一個標簽作為它的關鍵選擇器,那么這條規則就屬于該類別。
新聞熱點
疑難解答