CSS選擇器

CSS選擇器是學習CSS的一個核心部分，HTML頁面中的元素就是經過CSS選擇器來進行控制的，熟練使用CSS選擇器能迅速根據文檔結構對文檔樣式進行一對一，一對多或者多對一的控制和調整。

---

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

文檔的元素是最基本的選擇器也是最多見的選擇器，若是設置 HTML 的樣式，選擇器一般將是某個 HTML 元素，好比 p、h1、em、a，甚至能夠是 html 自己，如：

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

在 W3C 標準中，元素選擇器又稱爲類型選擇器（type selector）。類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每個實例，因此相似HTML, XML等標記語言均可以經過類型選擇器來匹配，甚至一些自定義標籤都會生效。

2、CSS 類選擇器

類選擇器容許以一種獨立於文檔元素的方式來指定樣式。該選擇器能夠單獨使用，也能夠與其餘元素結合使用。

提示： 只有適當地標記文檔後（指定claess屬性），才能使用這些選擇器，因此使用這兩種選擇器一般須要先作一些構想和計劃。要應用樣式而不考慮具體設計的元素，最經常使用的方法就是使用類選擇器。

語法： 類選擇器前面有個"."。

/* 基本語法 */
.important {color:red;}
/* 結合通配符使用 */
*.important {color:red;}
/* 結合元素使用，解釋爲：其 class 屬性值爲 important 的全部 p 元素 */
p.important {color:red;}

CSS多類選擇器

HTML元素的class屬性能夠包含一個詞列表，各個詞之間用空格分隔，詞的順序可有可無。如：

<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>

設置class 爲 important 的全部元素都是粗體，而 class 爲 warning 的全部元素爲斜體，class 中同時包含 important 和 warning 的全部元素還有一個銀色的背景 。就能夠寫做：

.important {font-weight:bold;}
.warning {font-style:italic;}
/* 注意：在HTML元素的class屬性中的兩個詞須要用「空格」隔開，在CSS中不能用「空格」隔開 */
.important.warning {background:silver;}

注意： 把兩個類選擇器連接在一塊兒，僅能夠選擇同時包含這些類名的元素（類名的順序不限），若是一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。如：

p.important.urgent {background:silver;}

這個選擇器將只匹配 class 屬性中同時包含詞 important 和 urgent 的 p 元素。所以，若是一個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配如下元素：

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

<!-- 同時包含了 important 和 urgent ，能夠匹配，與出現的順序無關 -->
<p class="important warning urgent">
    This paragraph is a very important.
</p>

3、CSS ID選擇器

語法： ID選擇器前面有個"#"。

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

與Javascript的區別：

/* 在同一個頁面中能匹配全部 ID 爲 mostImportant 的元素 */
#mostImportant {color:red; background:yellow;}

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

<!-- 如下內容在同一個html文件中，固然這不符合標準，此處僅用於說明區別 -->
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

與類選擇器的區別：

區別 1：只能在文檔中使用一次
不一樣於類選擇器，在一個 HTML 文檔中，ID 選擇器會使用一次，並且僅一次。

區別 2：不能使用 ID 詞列表
不一樣於類選擇器，ID 選擇器不能結合使用，由於 ID 屬性不容許有以空格分隔的詞列表。

注意：

• 關於命名：id和class屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起做用；

• 關於大小寫：id和class在HTML和XHTML中是區分大小的。

4、CSS 屬性選擇器

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

簡單屬性選擇：

/* 經過單個屬性選擇 */
*[title] {color:red;}
a[href] {color:red;}

/* 經過多個屬性選擇，注意：匹配同時含有多個屬性的元素 */
a[href][title] {color:red;}
img[alt][title] {border: 5px solid red;}

根據徹底匹配的屬性值選擇：

/* 經過單個屬性值選擇 */
a[href="http://xiachengwei5.coding.me"] {color: red;}

/* 經過多個屬性值選擇 */
a[href="http://xiachengwei5.coding.me"][title="颭的博客"] {color: red;}

根據部分屬性值選擇

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素。
[attribute = value]	用於選取帶有指定屬性和值的元素。
[attribute ~= value]	用於選取屬性值中包含指定詞彙的元素，該值匹配是沒有空格的字符串。
[attribute |= value]	用於選取帶有以指定值開頭的元素，該值匹配的是value或value-。
[attribute ^= value]	匹配屬性值以指定值開頭的每一個元素，該值能夠是任意值，推薦使用。
[attribute $= value]	匹配屬性值以指定值結尾的每一個元素。
[attribute *= value]	匹配屬性值中包含指定值的每一個元素，該值能夠是任意值，推薦使用。

5、CSS 後代選擇器（包含選擇器）

後代選擇器能夠選擇做爲某元素後代的元素。

語法： 父元素和後代元素從左至右排列，中間用空格隔開。

/* 匹配 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>

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

例如，若是寫做 ul em，這個語法就會選擇從 ul 元素繼承的全部 em 元素，而不論 em 的嵌套層次多深。

所以，ul em 將會選擇如下標記中的全部 em 元素：

<ul>
  <!-- 此處會匹配 -->
  <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>
          <!-- 此處也會匹配 -->
          <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>

6、CSS 子元素選擇器

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

若是你不但願選擇任意的後代元素，而是但願縮小範圍，只選擇某個元素的子元素，那就要使用子元素選擇器。

後代元素： 全部由其包裹的元素；

子代元素： 由其包裹，層級結構只比其小一級的元素；

語法： 父元素和子元素從左至右排列，中間用 > 隔開。

/* 選擇只做爲 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>

結合後臺選擇器和子選擇器

/* 選擇全部 class 爲 "company" 的 table 的全部後代 td 的子元素 p */
table.company td > p

7、CSS 相鄰兄弟選擇器

可選擇緊接在另外一元素後的元素，且兩者有相同父元素。

語法：兄弟元素從左至右排列，中間用 + 隔開。

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

<!-- 匹配失敗 -->
<p>第一個段落</p>
<h1>標題</h1>
<!-- 匹配成功 -->
<p>第二個段落</p>
<!-- 匹配失敗 -->
<p>第二個段落</p>

總結：

選擇器	描述
h1 p	後代選擇器，選擇全部的後代元素。
h1 , p	多元素選擇器，用","分隔，同時匹配元素h1或元素p。
h1 > p	子元素選擇器，選擇其子元素。
h1 + p	相鄰兄弟選擇器，選擇其後面相鄰的兄弟元素（有相同的父元素）。
h1 ~ p	通常兄弟選擇器，選擇其後面全部的兄弟元素（有相同的父元素）。

8、CSS 僞類

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

語法： 選擇器和僞類之間經過 : 隔開。

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

錨僞類

a:link {color: #FF0000}        /* 未訪問的連接 */
a:visited {color: #00FF00}    /* 已訪問的連接 */
a:hover {color: #FF00FF}    /* 鼠標移動到連接上 */
a:active {color: #0000FF}    /* 選定的連接 */

• 在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。

• 在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。

• 僞類名稱對大小寫不敏感。

:first-child 僞類和:laft-child僞類

可使用 :first-child 僞類來選擇元素的第一個子元素。

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

/* 選擇的就是第一個 p 元素，而不是 p 元素的第一個子元素 */
p:first-child {font-weight: bold;}
/* 選擇的就是最後一個 p 元素，而不是 p 元素的最後一個子元素 */
p:last-child {font-weight: bold;}
/* 選擇的就是第一個 li 元素，而不是 li 元素的第一個子元素 */
li:first-child {text-transform: uppercase;}
/* 經過CSS設置字母的大小寫 */
li:first-child {text-transform: lowercase;}

僞類彙總

選擇器	含義
E:first-child	匹配元素E的第一個子元素
E:link	匹配全部未被點擊的連接
E:visited	匹配全部已被點擊的連接
E:active	匹配鼠標已經其上按下、尚未釋放的E元素
E:hover	匹配鼠標懸停其上的E元素
E:focus	匹配得到當前焦點的E元素
E:lang(c)	匹配lang屬性等於c的E元素
E:enabled	匹配表單中可用的元素
E:disabled	匹配表單中禁用的元素
E:checked	匹配表單中被選中的radio或checkbox元素
E::selection	匹配用戶當前選中的元素
E:root	匹配文檔的根元素，對於HTML文檔，就是HTML元素
E:nth-child(n)	匹配其父元素的第n個子元素，第一個編號爲1
E:nth-last-child(n)	匹配其父元素的倒數第n個子元素，第一個編號爲1
E:nth-of-type(n)	與:nth-child()做用相似，可是僅匹配使用同種標籤的元素
E:nth-last-of-type(n)	與:nth-last-child() 做用相似，可是僅匹配使用同種標籤的元素
E:last-child	匹配父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type	匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)
E:last-of-type	匹配父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type(1)
E:only-child	匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同種標籤的惟一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一個不包含任何子元素的元素，文本節點也被看做子元素
E:not(selector)	匹配不符合當前選擇器的任何元素

僞元素

僞元素可用於定位文檔中包含的文本，爲與僞類進行區分，僞元素使用雙冒號 :: 定義，但單冒號 : 也能被識別。

屬性	描述
::first-letter	向文本的第一個字母添加特殊樣式。
::first-line	向文本的首行添加特殊樣式。
::before	在元素以前添加內容。
::after	在元素以後添加內容。
::focue	在元素以後添加內容。

9、參考資料

W3School CSS 選擇器

CSS選擇器詳解

十分鐘搞定CSS選擇器