CSS規(guī)范并沒(méi)有明確瀏覽器如何去實(shí)現(xiàn)樣式系統(tǒng)，僅僅是說(shuō)明了它們必須這樣做。有鑒于此，不同的樣式系統(tǒng)引擎可能會(huì)擁有完全不同的表現(xiàn)和行為，特別是 Gecko 與 WebKit， 這兩個(gè)引擎都是開(kāi)源項(xiàng)目，實(shí)現(xiàn)了類(lèi)似的算法，具有極其相近的優(yōu)缺點(diǎn)。因此下面介紹的小技巧對(duì)于真實(shí)世界的 Web 文檔將會(huì)十分有用。

第一部分內(nèi)容綜合討論了常見(jiàn)的樣式系統(tǒng)是如何分類(lèi)規(guī)則的。接下來(lái)的部分包含了書(shū)寫(xiě)規(guī)則的指南，它利用了前面討論的樣式系統(tǒng)的優(yōu)點(diǎn)。

樣式系統(tǒng)如何拆分規(guī)則

樣式系統(tǒng)將規(guī)則拆分成四個(gè)主要類(lèi)別：

1.ID 規(guī)則
2.Class 規(guī)則
3.標(biāo)簽規(guī)則
4.通用規(guī)則
理解這些分類(lèi)是十分關(guān)鍵的，因?yàn)樗鼈兪菢?gòu)建規(guī)則匹配塊的基礎(chǔ)。

我在下面的段落中使用術(shù)語(yǔ) 關(guān)鍵選擇器（key selector）。選擇器的最后面的部分即為關(guān)鍵選擇器（即用來(lái)匹配目標(biāo)元素的那部分，而不是該元素的祖先元素）。

例如，在下面規(guī)則中…

CSS Code復(fù)制內(nèi)容到剪貼板

a img,    
div > p,    
h1 + [title] {   
  …   
}  

關(guān)鍵選擇器為 img、 p 和 title.

ID 規(guī)則

這第一個(gè)類(lèi)別包含了那些將 ID 選擇器作為關(guān)鍵選擇器的規(guī)則。

示例

CSS Code復(fù)制內(nèi)容到剪貼板

button#backButton {…} /* This is an ID-categorized rule */  
#urlBar[type="autocomplete"] {…} /* This is an ID-categorized rule */  
treeitem > treerow > treecell#myCell:active {…} /* This is an ID-categorized rule */  

Class 規(guī)則

如果一個(gè)規(guī)則將一個(gè) class 明確作為它的關(guān)鍵選擇器，那么它就屬于該類(lèi)別。

示例

CSS Code復(fù)制內(nèi)容到剪貼板

button.toolbarButton {…} /* A class-based rule */  
.fancyText {…} /* A class-based rule */  
menuitem > .menu-left[checked="true"] {…} /* A class-based rule */  

標(biāo)簽規(guī)則

如果既沒(méi)有 class 也沒(méi)有 ID 來(lái)明確作為關(guān)鍵選擇器，那么接下來(lái)的候選者就是 標(biāo)簽 類(lèi)別。 如果一條規(guī)則將一個(gè)標(biāo)簽作為它的關(guān)鍵選擇器，那么這條規(guī)則就屬于該類(lèi)別。

示例

CSS Code復(fù)制內(nèi)容到剪貼板

td {…} /* A tag-based rule */  
treeitem > treerow {…} /* A tag-based rule */