如何用CSS選擇器查詢和風(fēng)格化Web元素_Web標(biāo)準(zhǔn)教程

在層疊樣式表（CSS）101系列的前面部分，我們討論了如何處理一個元素的多個規(guī)則。本文討論另一個重要的CSS特征：選擇器，它可以用來在一個頁面內(nèi)選擇元素風(fēng)格化Web頁。

選擇器類型

CSS樣式有多種方式實(shí)現(xiàn)元素選擇。各種各樣的選擇方法包括通過通用選擇器，類型選擇器，類選擇器，ID選擇器，祖先選擇器，子孫選擇器，鄰接兄弟選擇器和屬性選擇器進(jìn)行選擇。

這里我們將分別來看一下這幾種方法（鄰接兄弟和屬性除外，我們將在下周進(jìn)行討論）。注意：瀏覽器對CSS選擇器的支持是不一致的，不過你可以利用網(wǎng)上的說明來檢測某個選擇器是否能在你的目標(biāo)瀏覽器使用。

通用

通用選擇器允許你在整個頁面中使用樣式。基本上說來，一個樣式并不指定具體的元素，類等，所以它適用于頁面內(nèi)的所有元素。這對設(shè)置顏色，字體等來說十分有用。

通用選擇器可用于頁面上的所有元素，但是他們可以被某些具體的選擇器覆蓋。CSS規(guī)范中指出可以使用星號（*）來表示一個通用選擇器。列表A演示了如何使用通用選擇器來為頁面設(shè)定背景和默認(rèn)的字體。

類型

風(fēng)格化元素的一種最常用方法是通過它的類型。也就是說一個特定的元素?fù)碛凶约憾�義的樣式，且這個樣式可用于該類型的所有元素而不管元素在頁面上的位置。列表B中的例子演示了用一個類型選擇器來風(fēng)格化頁面中的所有段元素。

使用這種類型選擇器，葉面內(nèi)的所有段落元素（除非被更多特定選擇器覆蓋）擁有特定的頁邊距和紅色文本。現(xiàn)在你也可以自己建立CSS類來處理頁面上的特定元素風(fēng)格化問題。

類

在決定一個樣式覆蓋什么內(nèi)容時，類選擇器比類型選擇器有更多的控制。由類選擇器定義的樣式可以用于具有類屬性的所有元素，不管該元素在頁面中的位置。它可以很好的控制那些元素接受樣式。列表C中的例子演示了使用類只格式化頁面中的第一段。所以第一段的是鋸齒狀的字體，而接下來的段落與此不同。

類選擇器不能使用HTML 保留的元素如heading，p，h1等等。你還可以通過用空格分開的方法對同一個元素使用多個類。列表D演示了使用多個類來風(fēng)格化一個特定的段落。

你可以將類選擇器和類型選擇器結(jié)合在一起使用，來風(fēng)格化擁有分配的類的某些元素。在這個場景中，當(dāng)定義樣式時，元素名有一個由空格隔開的類名。列表E中的例子演示了這樣的技巧，即僅擁有賦予的特定類名的段元素才風(fēng)格化為某種方式，而擁有相同類名的頭部風(fēng)格化為另一種形式。我將會在使用元素的ID屬性時，更詳細(xì)的介紹。