在層疊樣式表(CSS)101系列的前面部分,我們討論如何處理一個元素的多個規則。本文討論另一個重要的CSS特徵:選擇器,它可以用來在一個頁面內選擇元素風格化Web頁。
選擇器類型
CSS樣式有多種方式實現元素選擇。各種各樣的選擇方法包括透過通用選擇器,類型選擇器,類別選擇器,ID選擇器,祖先選擇器,子孫選擇器,鄰接兄弟選擇器和屬性選擇器進行選擇。
這裡我們將分別來看這幾種方法(鄰接兄弟和屬性除外,我們將在下週進行討論)。注意:瀏覽器對CSS選擇器的支援是不一致的,不過你可以利用網路上的說明來偵測某個選擇器是否能在你的目標瀏覽器上使用。
一般
通用選擇器允許你在整個頁面中使用樣式。基本上說來,一個樣式並沒有指定特定的元素,類別等,所以它適用於頁面內的所有元素。這對設定顏色,字體等來說十分有用。
通用選擇器可用於頁面上的所有元素,但是他們可以被某些特定的選擇器覆蓋。 CSS規格中指出可以使用星號(*)來表示一個通用選擇器。列表A示範如何使用通用選擇器來為頁面設定背景和預設的字體。
類型
風格化元素的一種最常用方法是透過它的類型。也就是說一個特定的元素擁有自己定義的樣式,且這個樣式可用於該類型的所有元素而不管元素在頁面上的位置。清單B中的範例示範了用一個類型選擇器來風格化頁面中的所有段落元素。
使用這種類型選擇器,葉面內的所有段落元素(除非被更多特定選擇器覆蓋)擁有特定的頁邊距和紅色文字。現在你也可以自己建立CSS類別來處理頁面上的特定元素風格化問題。
類別
在決定一個樣式覆蓋什麼內容時,類別選擇器比類型選擇器有更多的控制。由類別選擇器定義的樣式可以用於具有類別屬性的所有元素,不管該元素在頁面中的位置。它可以很好的控制那些元素接受樣式。清單C中的範例示範了使用類別只格式化頁面中的第一段。所以第一段的是鋸齒狀的字體,而接下來的段落與此不同。
類別選擇器不能使用HTML 保留的元素如heading,p,h1等等。你也可以用空格分開的方法對同一個元素使用多個類別。列表D示範了使用多個類別來風格化一個特定的段落。
你可以將類別選擇器和類型選擇器結合在一起使用,來風格化擁有分配的類別的某些元素。在這個場景中,當定義樣式時,元素名稱有一個由空格隔開的類別名稱。列表E中的例子示範了這樣的技巧,即僅擁有賦予的特定類別名稱的段落元素才風格化為某種方式,而擁有相同類別名稱的頭部風格化為另一種形式。我將會在使用元素的ID屬性時,更詳細的介紹。