CSS的七種選擇器

• 元素選擇器
• 類選擇器
• ID選擇器
• 屬性選擇器
• 後代選擇器
• 子代選擇器
• 相鄰兄弟選擇器

一、元素選擇器

元素選擇器是CSS最常見的選擇器，也就是說，文件的元素就是最基本的選擇器。在 W3C 標準中，元素選擇器又稱為型別選擇器（typeselector）。如果設定 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，例如：

h1{
color:red;
}

元素選擇器可通過直接修改程式碼中的選擇器，將某樣式從一個元素切換到另一個元素中，例如，上面的例子，將h1選擇器修改為p選擇器，就可以直接將h1中選擇器樣式改為段落文字p中：

p{
color:red;
}
 

元素選擇器是各類選擇器中最簡單的一種了，其實也沒什麼好說的，用多了就上手了。

二、類選擇器

類選擇器允許以一種獨立於文件元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。

提示：只有適當地標記文件後，才能使用這些選擇器，以便類選擇器正常工作，所以使用這兩種選擇器通常需要先做一些構想和計劃。

為了將類選擇器的樣式與元素關聯，必須將 class指定為一個適當的值。即可通過設定class屬性的值選擇某一個類選擇器，進而修改元素的樣式。如下面的例子中，important就是類選擇器的一個標記

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph id very important.
</p>
 

其語法為：

*.important{color:red}
/*加上*表示為通用匹配選擇器，加或不加效果差不多，可根據自己的興趣自己選擇*/
.important {color:red;}

注1：結合元素選擇器（即類選擇器+元素選擇器）

類選擇器可以結合元素選擇器來使用。（其樣式作用與元素選擇器中的元素，並且class屬性為類選擇器的元素），如：

p.important{color:red;}
h1.important{color:blue;}
/*選擇器現在會匹配 class 屬性包含 important 的所有 p 元素，但是其他任何型別的元素都不匹配，不論是否有此 class 屬性。選擇器 p.important 解釋為：“其 class 屬性值為 important 的所有段落”。 因為 h1 元素不是段落，這個規則的選擇器與之不匹配，因此 h1 元素不會變成紅色文字。*/
 

注2：CSS多類選擇器

在 HTML 中，一個class值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作：

<p class="important warning">
/*important 和warning的順序無關要緊，寫成 warning important 也可以*/
This paragraph is a very important warning.
</p>

我們假設 class 為 important的所有元素都是粗體，而 class為 warning的所有元素為斜體，class中同時包含 important和 warning 的所有元素還有一個銀色的背景 。就可以寫作：

.important{font-weight:bold;}
.warning{font-style:italic;}
.important.warning{background:silver;}

通過把兩個類選擇器連結在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。其語法可以理解為：

.類選擇器1.類選擇器2{
;宣告
}

重要事項：在 IE7 之前的版本中，不同平臺的 Internet Explorer 都不能正確地處理多類選擇器。

三、ID選擇器

ID選擇器允許以一種獨立於文件元素的方式來指定樣式。

語法

1、ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號。

請看下面的規則：

*#intro {font-weight:bold;}

#intro {font-weight:bold;}

2、ID 選擇器引用 id 屬性中的值，即需要通過設定id屬性的值來選中ID選擇器。而元素選擇器和類選擇器都是通過設定class屬性的值來設定樣式。

以下是一個實際 ID 選擇器的例子：

<p id="intro">This is a paragraph of introduction.</p>

注：類選擇器與 ID選擇器的區別

在某些方面，ID 選擇器類似於類選擇器，不過也有一些重要差別。

在類選擇器這一章中我們曾講解過，可以為任意多個元素指定類。前一章中類名important 被應用到 p 和 h1 元素，而且它還可以應用到更多元素。

1：只能在文件中使用一次

與類不同，在一個 HTML 文件中，ID 選擇器會使用一次，而且僅一次。

2：不能使用 ID 詞列表

不同於類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。

3：ID 能包含更多含義

類似於類，可以獨立於元素來選擇 ID。有些情況下，您知道文件中會出現某個特定 ID 值，但是並不知道它會出現在哪個元素上，所以您想宣告獨立的 ID 選擇器。例如，您可能知道在一個給定的文件中會有一個 ID 值為 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節標題。您只知道每個文件都會有這麼一個最重要的內容，它可能在任何元素中，而且只能出現一個。如在這種情況下，可以編寫如下規則：

/*這個規則會與以下各個元素匹配（這些元素不能在同一個文件中同時出現，因為它們都有相同的 ID值）*/
#mostImportant {color:red; background:yellow;}
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

請注意，類選擇器和 ID 選擇器可能是區分大小寫的。這取決於文件的語言。HTML 和 XHTML 將類和 ID 值定義為區分大小寫，所以類和 ID 值的大小寫必須與文件中的相應值匹配。

四、屬性選擇器

可以根據元素的屬性及屬性值來選擇元素。CSS 2引入了屬性選擇器。

1、簡單屬性選擇

如果希望選擇有某個屬性的元素，而不論屬性值是什麼，可以使用簡單屬性選擇器。還可以根據多個屬性進行選擇，只需將屬性選擇器連結在一起即可，必須為屬性1+屬性2即同時擁有屬性1和2的才可以應用樣式。

*[title] {color:red;}/* 把包含標題（title）的所有元素變為紅色*/
a[href] {color:red;}/* 只對有 href 屬性的錨（a 元素）應用樣式*/
a[href][title] {color:red;}/* 將同時有 href 和 title 屬性的 HTML 超連結的文字設定為紅色*/
可以採用一些創造性的方法使用這個特性。
img[alt] {border: 5px solid red;}/* 對所有帶有 alt 屬性的影象應用樣式，提示：上面這個特例更適合用來診斷而不是設計，即用來確定影象是否確實有效。*/

2、根據具體屬性值選擇。除了選擇擁有某些屬性的元素，還可以進一步縮小選擇範圍，只選擇有特定屬性值的元素。

例1，假設希望將指向 Web 伺服器上某個指定文件的超連結變成紅色，可以這樣寫：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

例2，與簡單屬性選擇器類似，可以把多個屬性-值選擇器連結在一起來選擇一個文件。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
/*這會把以下標記中的同時具備超連結和title屬性的第一個文字變為紅色，但是第二個或第三個連結不受影響：*/
<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

【注意】屬性與屬性值必須完全匹配

請注意，這種格式要求必須與屬性值完全匹配。

如果屬性值包含用空格分隔的值列表，匹配就可能出問題。

請考慮一下的標記片段：

<p class="important warning">This paragraph is a very important warning.</p>
/*如果寫成 p[class="important"]，那麼這個規則不能匹配示例標記*/

要根據具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

3、根據部分屬性值選擇

如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。即只要定義的屬性中包含後面class定義的屬性就可以應用這個樣式。

假設您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點：

p[class~="important"] {color: red;}

如果忽略了波浪號，則說明需要完成完全值匹配。

注：部分值屬性選擇器與點號類名記法的區別

該選擇器等價於我們在類選擇器中討論過的點號類名記法。也就是說，p.important 和 p[class="important"] 應用到 HTML 文件時是等價的。那麼，為什麼還要有 "~=" 屬性選擇器呢？因為它能用於任何屬性，而不只是 class。

例如，可以有一個包含大量影象的文件，其中只有一部分是圖片。對此，可以使用一個基於 title 文件的部分屬性選擇器，只選擇這些圖片：

img[title~="Figure"] {border: 1px solid gray;}

這個規則會選擇 title 文字包含 "Figure" 的所有影象。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的影象都不會匹配。

五、後代選擇器

後代選擇器（descendant selector）又稱為包含選擇器。後代選擇器可以選擇作為某元素後代的元素。

1、根據上下文選擇元素

我們可以定義後代選擇器來建立一些規則，使這些規則在某些文件結構中起作用，而在另外一些結構中不起作用。

舉例來說，如果您希望只對 h1 元素中的 em 元素應用樣式，可以這樣寫：

h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1>/*important會變紅色*/
<p>This is a <em>important</em> paragraph.</p>/*不會變成紅色*/

當然，您也可以在 h1 中找到的每個 em 元素上放一個 class 屬性，但是顯然，後代選擇器的效率更高。

2、語法解釋

元素1 元素2 {宣告;} /*元素2只有跟隨在元素1後面才會應用該樣式，不論元素2鑲嵌層次有多深*/

在後代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”、“... 作為 ... 的後代”，但是要求必須從右向左讀選擇器。

因此，h1 em 選擇器可以解釋為 “作為 h1 元素後代的任何 em 元素”。如果要從左向右讀選擇器，可以換成以下說法：“包含 em 的所有 h1 會把以下樣式應用到該 em”。

3、具體應用

後代選擇器的功能極其強大。有了它，可以使 HTML 中不可能實現的任務成為可能。

假設有一個文件，其中有一個邊欄，還有一個主區。邊欄的背景為藍色，主區的背景為白色，這兩個區都包含連結列表。不能把所有連結都設定為藍色，因為這樣一來邊欄中的藍色連結都無法看到。

解決方法是使用後代選擇器。在這種情況下，可以為包含邊欄的 div 指定值為 sidebar 的 class 屬性，並把主區的 class 屬性值設定為 maincontent。然後編寫以下樣式：

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

有關後代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。

例如，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的巢狀層次多深。

因此，ul em 將會選擇以下標記中的所有 em 元素：

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

六、子代選擇器

與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。

1、選擇子元素

如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

2、語法解釋

子選擇器使用大於號（子結合符）。子結合符兩邊可以有空白符，這是可選的，有或者沒有都沒關係。

例如，如果您希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：

/*如果從右向左讀，選擇器 h1 > strong 可以解釋為“選擇作為 h1 元素子元素的所有strong元素*/
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>/*兩個strong元素變為紅色*/
<h1>This is <em>really <strong>very</strong></em> important.</h1>/*不變紅色，不受影響*/

3、結合後代選擇器和子選擇器

請看下面這個選擇器：

table.company td > p
/*會選擇作為 td 元素子元素的所有 p 元素，這個 td 元素本身從 table 元素繼承，該 table 元素有一個包含 company 的 class 屬性。*/

七、css相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。

如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。

例如，如果要增加緊接在 h1 元素後出現的段落的上邊距，可以這樣寫：

h1 + p {margin-top:50px;}/* 選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素*/

語法解釋

相鄰兄弟選擇器使用了加號（+），即相鄰兄弟結合符（Adjacent sibling combinator）。

註釋：與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。

請看下面這個文件樹片段：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

在上面的片段中，div 元素中包含兩個列表：一個無序列表，一個有序列表，每個列表都包含三個列表項。這兩個列表是相鄰兄弟，列表項本身也是相鄰兄弟。不過，第一個列表中的列表項與第二個列表中的列表項不是相鄰兄弟，因為這兩組列表項不屬於同一父元素（最多隻能算堂兄弟）。

請記住，用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選擇器：

li + li {font-weight:bold;}

上面這個選擇器只會把列表中的第二個和第三個列表項變為粗體。第一個列表項不受影響。

結合其他選擇器

相鄰兄弟結合符還可以結合其他結合符：

html > body table + ul {margin-top:20px;}
/* 選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素*/