CSS中的五大選擇器

1、元素選擇器

最常見的css選擇器當屬元素選擇器了，在HTML文件中該選擇器通常是指某種HTML元素，例如：p,h2,span,a,div乃至html。

例如：

html {background-color: black;}p {font-size: 30px; backgroud-color: gray;}h2 {background-color: red;}

以上css程式碼會對整個文件新增黑色背景；將所有p元素字型大小設定為30畫素同時新增灰色背景；對文件中所有h2元素新增紅色背景。

透過上面的例子也可以看出css的基本規則結構：由選擇器和宣告塊組成。每個宣告塊中包含一個或多個宣告。每個宣告的格式為：屬性名 ： 屬性值。

每條宣告以分號”;”結尾。如果在一個宣告中使用了不正確的屬性值，或者不正確的屬性，則該條宣告會被忽略掉。另外請注意不要忘記每條宣告後面的分號。

我們也可以同時對多個html元素進行宣告：

h1, h2, h3, h4, h5, h6, p {font-family: 黑體;}

這樣會將文件中所有的h1~h6以及p元素字型設定為”黑體”。如果我們希望一鍋粥地選取所有的元素，可以使用萬用字元 "*"： * { font-size: 20px;}

這樣所有的元素都將被選中，雖然font-size屬性對於某些元素是無效的，那麼它將被忽略。

2、類選擇器

(1)單類選擇器

單純的元素選擇器似乎還過於粗糙了，比如我們希望在文件中突出加粗顯示某種重要的內容，例如稿件的截至日期。問題在於我們不能確定稿件的截至日期將會出現在哪種元素中，或者它可能出現在多種不同的元素中。這個時候，我們可以考慮使用類選擇器(class selector)。

要使用類選擇器我們需要首先對檔案元素新增一個class屬性，比如截至日期可能會出現在以下元素中:

<p class="deadline">...</p><h2 class="deadline">...</h2>

這樣我們就可以用以下方式使用類選擇器了：

p.deadline { color: red;}h2.deadline { color: red;}

點號”.”加上類名就組成了一個類選擇器。以上2個選擇器會選擇所有包含”deadline”類的p元素和h2元素。而其餘包含該屬性的元素則不會被選中。

如果我們省略.deadline前面的元素名，那麼所有包含該類的元素都將被選中：

.deadline { color: red;}

通常情況下，我們會組合使用以上2者得到更加有趣的樣式：

.deadline { color: red;}span.deadline { font-style: italic;}

以上程式碼首先會對所有的包含deadline的元素字型設定為紅色，同時會對span元素中的文字新增額外的斜體效果。這樣，如果你希望某處文字擁有額外的斜體效果將它們放在<span></span>中就可以了。

(2)多類選擇器

在實踐的做法中，元素的calss屬性可能不止包含一個單詞，而是一串單詞，各個單詞之間用空格隔開。

比如某些元素包含一個”warning”類，某些元素包含一個”important”類，某些元素同時包含”warning important”類。屬性名出現的順序沒有關係：

class = "warning important"class = "important warning"

以上2者是等價的。我們希望包含warning類的元素有一個醒目的紅色字型，包含important屬性的元素有一個加粗的字型顯示，而同時包含以上2中屬性的元素另外擁有一個藍色背景(不管還能不能看清文字了)，我們可以使用以下的css程式碼：

.warning { color: red;}.important { font-weight: bold;}.warning.important { background: blue;}

當然，第三條你也可以寫成： .important.warning { background: blue;} 和詞序沒有關係。說明一下，.warning會匹配所有包含warning屬性的元素，不管該元素還包含多少其他的屬性。.important同理。而.important.warning會匹配所有同時包含以上2種屬性的元素，不管該元素還包含多少其他的類，也不管他們在類列表中出現的順序，只要其中含有這2個屬性，則會被選擇進來！

同樣地，多於多類選擇器，在前面加上元素名，則會匹配包含指定類名的指定元素，例如：p.warning.important {}

將會匹配同時包含warning和important屬性的p元素，其他同樣包含以上2類的元素則不會被選中。

3、ID選擇器

ID選擇器和類選擇器有些類似，但是差別又十分顯著。首先一個元素不能像類屬性一樣擁有多個類，一個元素只能擁有一個唯一的ID屬性。其次一個ID值在一個HTML文件中只能出現一次，也就是一個ID只能唯一標識一個元素(不是一類元素，而是一個元素)。類似類屬性，在使用ID選擇器前首先要在元素中新增ID屬性，例如：

<p id="top-para">...</p><p id="foot-para">...</p>

使用ID選擇器的方法為井號”#”後面跟id值。現在我們使用id選擇器選擇以上2個p元素如：

#top-para {} #foot-para {}；

這樣我們就可以對以上2個段落進行需要的操作了。正因為ID選擇器的唯一性，也使其用法變得相對簡單。

4、屬性選擇器

屬性選擇器在css2中引入，使我們可以根據元素的屬性及屬性值來選擇元素。下面分別來說明：

(1)簡單屬性選擇器

簡單的屬性選擇器可以使我們根據一個元素是否包含某個屬性來做出選擇。使用方法為: 元素名[屬性名] 或 *[屬性名]。比如我們希望選擇帶有alt屬性的所有img元素： img[alt] { ...}

選擇帶有title屬性的所有元素：*[title] { ...}。同類選擇器類似，我們也可以根據多個屬性資訊進行選擇，例如同時擁有href和title的a元素：

a[href][title] { ...}

組合使用類選擇器使我們的選擇更加富於靈活性。

(2)具體屬性值選擇器

如果我們希望更加精確地根據屬性值來選擇元素，我們可以在簡單的屬性選擇器中指定屬性的值。最簡單的我們希望找到href屬性值為 的錨元素：

a[href="] { font-weight: bold;}

要特別注意的是，這裡的具體值匹配實質上是一個字串匹配，所以在這裡對於class屬性而言，詞條的順序是有關係的。

p[class="warning important"] { ...}

將不會匹配到<p class="important warning"></p>，也不會匹配到<p class="warning important mini-type">，這裡就是一個生硬的字串匹配。

另外，想要同時匹配多個屬性的值也是可以的：

p[class="warning"][title="para"] { ...}

將匹配到類為warning(僅有warning)，title屬性為para的p元素。

(3)部分屬性值選擇器

根據屬性值來匹配元素無疑比簡單的屬性匹配更加精細化了，但是似乎有些精細化過頭了，字串的完全匹配顯得過於生硬。比如我們希望選擇在一串屬性值中出現了某個關鍵字的元素，不妨再次以class屬性為例，我們希望選擇所有包含了warning類的p元素，屬性值匹配將無法做到，好在還是有辦法的，我們可以使用以下的部分值匹配選擇器：

p[class~="warning"] { ...}

該選擇器在等號”=”前面新增了一個波浪號~，含義為包含後面的字串的匹配。以上程式碼將會選擇所有class屬性中包含”warning”的p元素。為了更加清楚地說明問題，它和以下的選擇器是等價的：

p.warning { ...}

當然~=不僅僅只是用在class屬性上，這只是一個示例。

再比如說，我們的文件中包含一系列人物介紹的div元素：

<div title="intro 1">...</div>
<div title="intro 2">...</div>
<div title="intro 3">...</div>

我們可以使用以下的方式選擇所有人物簡介div：div[title~="intro"] { ...}

不過遺憾的是<div title="animal intro">也將會被選擇進來，這是需要我們特別注意的地方。

關於部分值選擇器也有其侷限性，它匹配的是由空格分隔的單詞，如果我們將上面的div寫成下面的樣子就會匹配失敗：

<div title="intro-1">...</div>
<div title="intro-2">...</div>
<div title="intro-3">...</div>

對於這種情況，我們可以使用子串匹配屬性選擇器。規則如下：

l div[title^="intro"] {...} //title以intro開頭的div元素
l div[title$="intro"] {...} //title以intro結尾的div元素
l div[title*="intro"] {...} //title中包含"intro"子串的div元素

舉例來說：

a[href*="google."] {...}

將包含所有連結中包含”google.”的a元素。

div[title$="y"] {...}

將包含以下所有div元素：

<div title="cloudy">...</div>

<div title="snowy">...</div>

<div title="rainy">...</div>

可以看出部分值屬性選擇器的功能是十分強大的。

5、派生選擇器

派生選擇器，乍一看名字不知所云，它又名上下文選擇器，它是使用文件DOM結構來進行css選擇的。DOM結構在此不再贅述了，但為了更加清楚地說明問題，我們這裡給出一個DOM樹作為參考：

(1)後代選擇器(descendant selector)

如上圖，如果想要選擇body元素的所有li子元素，方法如下：

body li { ...}

這裡會選擇所有的li後代，也就是圖中的body下的所有li，不論他們之間相隔的代數有多少。同理，如果想要選擇h1元素下的span，可以使用以下程式碼：

h1 span { ...}

如果我們要選擇擁有warning類的元素的li後代，可以使用下面的方法：

.warning li { ...}

當然，如果希望只選擇擁有warning類的div元素的li後代，可以寫作：

div.warning li { ...}

由上面的例子不難看出，後代選擇器的規則就是用空格連線2個或多個選擇器。空格的含義為：…的後代。多個選擇器的情況如下： ul li li { ...}

這樣，就會選擇所有ul下包含在li元素下的所有li元素了，聽起來十分拗口，參考我們的DOM樹，會選擇到文件樹種最後一排li元素。

(2)子元素選擇器(child selector)

子元素選擇器和後代選擇器不同，它只能選擇某元素的直接後代，不能跨代選取，用法如下：ul > li { ...}

兩個子元素中間用一個大於號>連線。上面的程式碼會選擇到所有ul元素的直接li子元素。對應到DOM樹中，所有的li元素都會被選中，原因是圖中所有的li元素都是ul的子元素。

但是，以下程式碼將不會選中任何元素：

h1 > span { ...}

由於span是h1的”孫子元素”，h1沒有直接的span子元素，因而上面的程式碼將不會選到任何結果。其他方面和後代元素類似，需要特別注意的就是子元素選擇器不能隔代選取。

(3)相鄰兄弟選擇器(Adjacent sibling selector)

相鄰兄弟選擇器，故名思意將會選取某個元素的相鄰兄弟元素，注意它選取的是相鄰的兄弟元素而不是所有的兄弟元素，實際上選取的是緊跟在後面的兄弟元素。

相鄰兄弟選擇器在實踐中有比較不錯的應用，例如，你想在一個h2標題後面的段落應用某種獨到的樣式或者希望在某類p段落後的table上新增一個額外的邊距等等。它的用法如下：

li + li { ...}

以上程式碼會選擇所有作為li相鄰元素的li元素，聽起來又有點拗口，參考DOM樹，它會選擇除了排在第一個li元素的其餘4個li元素，因為2個排在第1的li元素沒有更靠前的兄弟元素來選擇它。

再比如：h1 + p { ...} 會選擇所有緊跟h1後面的p兄弟元素。h1.warning + p { ...} 會選擇所有有用warning類的h1元素後面緊跟的p兄弟元素。

(4)幾種派生選擇器的結合使用

實際上，以上介紹的幾種派生選擇器可以結合使用，看下面的例子：

html > body li.warning + li { ...}

上面的選擇器含義為：html元素的body子元素中，所有擁有warning類的li元素的相鄰兄弟元素。