CSS選擇器是學(xué)習(xí)CSS的一個(gè)核心部分，HTML頁(yè)面中的元素就是通過(guò)CSS選擇器來(lái)進(jìn)行控制的，熟練使用CSS選擇器能迅速根據(jù)文檔結(jié)構(gòu)對(duì)文檔樣式進(jìn)行一對(duì)一，一對(duì)多或者多對(duì)一的控制和調(diào)整。

一、CSS 元素選擇器（類型選擇器）

文檔的元素是最基本的選擇器也是最常見(jiàn)的選擇器，如果設(shè)置 HTML 的樣式，選擇器通常將是某個(gè) HTML 元素，比如 p、h1、em、a，甚至可以是 html本身，如：

html {margin: 0; padding: 0;}
h1 {font-family: "華文楷體"; color:blue;}
a {font-size:16px; text-decoration: none;}

在 W3C 標(biāo)準(zhǔn)中，元素選擇器又稱為類型選擇器（type selector）。類型選擇器匹配文檔語(yǔ)言元素類型的名稱。類型選擇器匹配文檔樹(shù)中該元素類型的每一個(gè)實(shí)例，所以類似HTML, XML等標(biāo)記語(yǔ)言都可以通過(guò)類型選擇器來(lái)匹配，甚至一些自定義標(biāo)簽都會(huì)生效。

二、CSS 類選擇器

類選擇器允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式。該選擇器可以單獨(dú)使用，也可以與其他元素結(jié)合使用。

提示： 只有適當(dāng)?shù)貥?biāo)記文檔后（指定claess屬性），才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構(gòu)想和計(jì)劃。要應(yīng)用樣式而不考慮具體設(shè)計(jì)的元素，最常用的方法就是使用類選擇器。

語(yǔ)法： 類選擇器前面有個(gè)"."。

/* 基本語(yǔ)法 */
.important {color:red;}
/* 結(jié)合通配符使用 */
*.important {color:red;}
/* 結(jié)合元素使用，解釋為：其 class 屬性值為 important 的所有 p 元素 */
p.important {color:red;}

CSS多類選擇器

HTML元素的class屬性可以包含一個(gè)詞列表，各個(gè)詞之間用空格分隔，詞的順序無(wú)關(guān)緊要。如：

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

<p class="warning">
    This paragraph is a very warning.
</p>

<p class="important warning">
    This paragraph is a very important warning.
</p>

設(shè)置class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時(shí)包含 important 和 warning 的所有元素還有一個(gè)銀色的背景 。就可以寫(xiě)作：

.important {font-weight:bold;}
.warning {font-style:italic;}
/* 注意：在HTML元素的class屬性中的兩個(gè)詞需要用“空格”隔開(kāi)，在CSS中不能用“空格”隔開(kāi) */
.important.warning {background:silver;}

注意： 把兩個(gè)類選擇器鏈接在一起，僅可以選擇同時(shí)包含這些類名的元素（類名的順序不限），如果一個(gè)多類選擇器包含類名列表中沒(méi)有的一個(gè)類名，匹配就會(huì)失敗。如：

p.important.urgent {background:silver;}

這個(gè)選擇器將只匹配 class 屬性中同時(shí)包含詞 important 和 urgent 的 p 元素。因此，如果一個(gè) p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過(guò)，它能匹配以下元素：

<!-- 沒(méi)有同時(shí)包含 important 和 urgent ，不能匹配 -->
<p class="important warning">
    This paragraph is a very important.
</p>

<!-- 同時(shí)包含了 important 和 urgent ，可以匹配，與出現(xiàn)的順序無(wú)關(guān) -->
<p class="important warning urgent">
    This paragraph is a very important.
</p>

三、CSS ID選擇器

語(yǔ)法： ID選擇器前面有個(gè)"#"。

/* 基本語(yǔ)法 */
#intro {font-weight:bold;}
/* 配合通配符使用 */
*#intro {font-weight:bold;}

與Javascript的區(qū)別：

/* 在同一個(gè)頁(yè)面中能匹配所有 ID 為 mostImportant 的元素 */
#mostImportant {color:red; background:yellow;}

/* 在同一個(gè)頁(yè)面中只能獲取文檔中第一個(gè) ID 為 mostImportant 的內(nèi)容 */
document.getElementById("mostImportant").innerHTML;

<!-- 以下內(nèi)容在同一個(gè)html文件中，當(dāng)然這不符合標(biāo)準(zhǔn)，此處僅用于說(shuō)明區(qū)別 -->
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

與類選擇器的區(qū)別：

區(qū)別 1：只能在文檔中使用一次
不同于類選擇器，在一個(gè) HTML 文檔中，ID 選擇器會(huì)使用一次，而且僅一次。

區(qū)別 2：不能使用 ID 詞列表
不同于類選擇器，ID 選擇器不能結(jié)合使用，因?yàn)?ID 屬性不允許有以空格分隔的詞列表。

注意：

• 關(guān)于命名：id和class屬性不要以數(shù)字開(kāi)頭，數(shù)字開(kāi)頭的ID在 Mozilla/Firefox 瀏覽器中不起作用；
• 關(guān)于大小寫(xiě)：id和class在HTML和XHTML中是區(qū)分大小的。

四、CSS 屬性選擇器

CSS 2 引入了屬性選擇器。屬性選擇器可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。

簡(jiǎn)單屬性選擇：

/* 通過(guò)單個(gè)屬性選擇 */
*[title] {color:red;}
a[href] {color:red;}

/* 通過(guò)多個(gè)屬性選擇，注意：匹配同時(shí)含有多個(gè)屬性的元素 */
a[href][title] {color:red;}
img[alt][title] {border: 5px solid red;}

根據(jù)完全匹配的屬性值選擇：

/* 通過(guò)單個(gè)屬性值選擇 */
a[] {color: red;}

/* 通過(guò)多個(gè)屬性值選擇 */
a[] {color: red;}

根據(jù)部分屬性值選擇

五、CSS 后代選擇器（包含選擇器）

后代選擇器可以選擇作為某元素后代的元素。

語(yǔ)法： 父元素和后代元素從左至右排列，中間用空格隔開(kāi)。

/* 匹配 h1 下所有的 em 元素 */
h1 em {color:red;}

/* 匹配所有 class 為 "maincontent" 的 div下所有的 a 元素 */
div.maincontent a {color:blue;}

<!-- 匹配成功 -->
<h1>This is a <em>important</em> heading</h1>

<!-- 匹配失敗 -->
<p>This is a <em>important</em> paragraph.</p>

注意： 有關(guān)后代選擇器有一個(gè)易被忽視的方面，即兩個(gè)元素之間的層次間隔可以是無(wú)限的。

例如，如果寫(xiě)作 ul em，這個(gè)語(yǔ)法就會(huì)選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深。

因此，ul em 將會(huì)選擇以下標(biāo)記中的所有 em 元素：

<ul>
  <!-- 此處會(huì)匹配 -->
  <em>0</em>
  <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>
          <!-- 此處也會(huì)匹配 -->
          <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>

六、CSS 子元素選擇器

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

如果你不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個(gè)元素的子元素，那就要使用子元素選擇器。

后代元素： 所有由其包裹的元素；

子代元素： 由其包裹，層級(jí)結(jié)構(gòu)只比其小一級(jí)的元素；

語(yǔ)法： 父元素和子元素從左至右排列，中間用 > 隔開(kāi)。

/* 選擇只作為 h1 元素子元素的 strong 元素 */
h1 > strong {color:red;}

<!-- 匹配成功 -->
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<!-- 匹配失敗 -->
<h1>This is <em>really <strong>very</strong></em> important.</h1>

結(jié)合后臺(tái)選擇器和子選擇器

/* 選擇所有 class 為 "company" 的 table 的所有后代 td 的子元素 p */
table.company td > p

七、CSS 相鄰兄弟選擇器

可選擇緊接在另一元素后的元素，且二者有相同父元素。

語(yǔ)法：兄弟元素從左至右排列，中間用 + 隔開(kāi)。

/* 選擇緊接在 h1 后（前面的元素不能匹配）的元素，而且二者有相同的父元素 */
h1 + p {color: red;}

<!-- 匹配失敗 -->
<p>第一個(gè)段落</p>
<h1>標(biāo)題</h1>
<!-- 匹配成功 -->
<p>第二個(gè)段落</p>
<!-- 匹配失敗 -->
<p>第二個(gè)段落</p>

總結(jié)：

八、CSS 偽類

用于向某些選擇器添加特殊的效果。

語(yǔ)法： 選擇器和偽類之間通過(guò) : 隔開(kāi)。

/* 選擇器 : 偽類 */
selector : pseudo-class {property: value}
/* CSS 類也可與偽類搭配使用 */
selector.class : pseudo-class {property: value}

錨偽類

a:link {color: #FF0000}     /* 未訪問(wèn)的鏈接 */
a:visited {color: #00FF00}  /* 已訪問(wèn)的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF}   /* 選定的鏈接 */

• 在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。
• 偽類名稱對(duì)大小寫(xiě)不敏感。

:first-child 偽類和:laft-child偽類

可以使用 :first-child 偽類來(lái)選擇元素的第一個(gè)子元素。

<div>
  <!-- 第一個(gè) p 元素 -->
  <p>These are the necessary steps:</p>
    <ul>
         <!-- 第一個(gè) li 元素 -->
        <li>Intert Key</li>
        <li>Turn key
            <!-- 第一個(gè) strong 元素 -->
            <strong>clockwise</strong>
         </li>
        <li>Push accelerator</li>
    </ul>
     <!-- 最后一個(gè) p 元素 -->
    <p>Do
      <!-- 第一個(gè) em 元素 -->
      <em>not</em>
      push the brake at the same time as the accelerator.
    </p>
</div>

/* 選擇的就是第一個(gè) p 元素，而不是 p 元素的第一個(gè)子元素 */
p:first-child {font-weight: bold;}
/* 選擇的就是最后一個(gè) p 元素，而不是 p 元素的最后一個(gè)子元素 */
p:last-child {font-weight: bold;}
/* 選擇的就是第一個(gè) li 元素，而不是 li 元素的第一個(gè)子元素 */
li:first-child {text-transform: uppercase;}
/* 通過(guò)CSS設(shè)置字母的大小寫(xiě) */
li:first-child {text-transform: lowercase;}

偽類匯總

偽元素

偽元素可用于定位文檔中包含的文本，為與偽類進(jìn)行區(qū)分，偽元素使用雙冒號(hào) :: 定義，但單冒號(hào) : 也能被識(shí)別。

九、參考資料

W3School CSS 選擇器

CSS選擇器詳解

十分鐘搞定CSS選擇器