精通 CSS 選擇器

CSS 選擇器除了樣式表匹配元素時須要用到，在使用 jQuery 等庫的時候也能夠利用 CSS 選擇器來選擇元素，所以做爲前端開發須要熟練掌握。下面是一些經常使用的 CSS 選擇器示例。

元素選擇器

E，選擇全部指定元素名稱的元素，例如 p，選擇全部的 p 元素。

通用選擇器

*，選擇全部元素，例如：

* {
  box-sizing: border-box;
}

類選擇器

.class，用一個點號加類名錶示，例如 .header，選擇全部 class 屬性中包含 header 的元素。

<div class="header">會被選中</div>

<h2 class="header">也會被選中</h2>

多類選擇器

使用多個 class 能夠選擇同時含有多個類名的元素，例如 .collapse.in 選擇同時含有類 collapse 和 in 的元素：

<div class="collapse in">會被選中</div>
<div class="collapse">不會被選中</div>
<div class="in">不會被選中</div>

IE 6 瀏覽器不支持多類選擇器，會忽略多類中前面的類，好比這裏 IE 6 只會匹配 .in。

ID 選擇器

#id，用一個 # 號加 ID 值表示，例如 #title，選擇 id 屬性等於 title 的元素。

<h2 id="title"></h2>

上下文選擇器

selector selector，用於選擇元素內部的元素，例如 p span，選擇全部屬於 p 元素內部的 span 元素。

<p>
  <span>會被選中</span>
  <strong><span>一樣會被選中</span></strong>
</p>

子元素選擇器

selector > selector，用於選擇帶有特定父元素的元素，例如 p > span，選擇全部父元素爲 p 的 span 元素。

<p>
  <span>父元素是 p 會被選中</span>
  <strong><span>父元素是 strong 不會被選中</span></strong>
</p>

相鄰元素選擇器

selector + selector，用於選擇一個特定元素以後緊跟的元素，h2 + p，選擇全部相鄰 h2 元素以後的同級 p 元素。

<div>
  <p>h2 以前的不會被選中</p>
  <h2>示例</h2>
  <p>緊鄰 h2 的會被選中</p>
  <p>不會被選中</p>
</div>

同級元素選擇器

selector ~ selector，用於選擇特定元素以後的同級元素，h2 ~ p，選擇全部 h2 元素以後的同級 p 元素。

<div>
  <p>不會被選中</p>
  <h2>示例</h2>
  <p>h2 以後的同級 p 元素會被選中</p>
  <span>示例</span>
  <p>h2 以後的同級 p 元素會被選中</p>
</div>

同級元素選擇器選擇特定元素以後的全部同級元素，而相鄰元素選擇器只選擇特定元素以後緊鄰的那個元素。

屬性名選擇器

[attribute]，用於選擇全部帶有特定屬性的元素，例如 [title]，選擇全部帶有 title 屬性的元素。

<a title="link">會被選中</a>
<a>不會被選中</a>

屬性值選擇器

[attribute="value"]，用於選擇全部帶有特定屬性和值的元素，例如 [title="link"]，選擇全部帶有 title 屬性而且值爲 link 的元素。

<a title="link">會被選中</a>
<a title="this is a link">屬性值不匹配，不會被選中</a>

[attribute~="value"]，用於選擇全部帶有特定屬性而且屬性值包含指定單詞的元素，單詞之間用空格分隔，例如 [title~="link"]，選擇全部帶有 title 屬性而且屬性值中包含 link 單詞的元素。

<a title="link">會被選中</a>
<a title="this is a link">屬性值中包含 link 會被選中</a>
<a title="thisisalink">不會被選中</a>
<a title="other">不會被選中</a>

[attribute|="value"]，用於選擇帶有特定屬性而且屬性值是以指定值開頭的全部元素，該值必須是整個單詞，或者後面跟着連字符，例如 [title|="red"]，選擇全部帶有 title 屬性而且值是 red 開頭的元素。

<a title="red">會被選中</a>
<a title="red-hot">會被選中</a>
<a title="redhot">不會被選中</a>

[attribute^="value"]，用於選擇帶有特定屬性而且屬性值是以指定字符串開頭的全部元素，例如 a[href^="http://"]，選擇全部 href 屬性值以 http:// 字符串開頭的 a 元素。

<a href="http://www.baidu.com/">會被選中</a>
<a href="/index">不會被選中</a>

[attribute$="value"]，用於選擇帶有特定屬性而且屬性值是以指定字符串結尾的全部元素，例如 img[src$=".png"]，選擇全部 png 格式的 img 元素。

<img alt="logo" src="/assets/logo.png"> <!-- 會被選中 -->
<img alt="banner" src="/assets/banner.jpg"> <!-- 不會被選中 -->

[attribute*="value"]，用於選擇帶有特定屬性而且屬性值包含指定字符串的全部元素，例如 [title*="red"]，選擇全部帶有 title 屬性而且值包含 red 字符串的全部元素。

<a title="red">會被選中</a>
<a title="redhot">會被選中</a>
<a title="hotredhot">會被選中</a>

屬性選擇器對比

選擇器	屬性值
[attribute]	僅匹配屬性名，與屬性值無關
[attribute="value"]	徹底匹配屬性名和屬性值
[attribute~="value"]	屬性值以空格分隔，包含 value 單詞或者僅爲 value
[attribute管道符="value"]	屬性值以 value- 開頭或者僅爲 value
[attribute^="value"]	屬性值以 value 字符串開頭
[attribute$="value"]	屬性值以 value 字符串結尾
[attribute*="value"]	屬性值包含 value 字符串

僞類

狀態僞類選擇器

狀態僞類選擇器會根據元素的特定狀態選擇相應的元素。

選擇器	說明	例子
:link	選擇全部未被訪問的連接	a:link
:visited	選擇全部已被訪問的連接	a:visited
:focus	選擇獲取焦點的元素	input:focus
:hover	擇鼠標指針位於其上的元素	li:hover
:active	選擇激活的元素	button:active

:target，選擇目標元素。當用戶點擊一個指向頁面中其它元素的連接，則那個被指向的元素就是目標元素，例如：

<a href="#more">more</a> <!-- 點擊這個連接以後 -->

<div id="more">...</div> <!-- 這個元素會被 :target 選中 -->

:enabled，選擇全部已啓用的元素。

<input type="text"> <!-- 會被選中 -->
<input disabled type="text"> <!-- 已禁用不會被選中 -->

:disabled，選擇全部被禁用的元素，和 :enabled 相反，例如：

input[type="text"]:disabled {
  background-color: #eee;
}

給禁用的文本輸入框一個灰色的背景。

<input type="text"> <!-- 不會被選中 -->
<input disabled type="text"> <!-- 禁用的文本框會被選中 -->

:checked，選擇全部已經被勾選的單選框或者複選框，例如 input:checked。

<input checked type="radio"> <!-- 已經勾選的元素會被選中 -->
<input type="checkbox"> <!-- 沒有勾選的不會被選中 -->

示例，結合屬性選擇器選擇被勾選的單選框：input[type="radio"]:checked。

:lang 選擇器

:lang(language)，用於選擇全部帶有以指定值開頭的 lang 屬性的元素，例如 p:lang(en)。

<p lang="en">會被選中</p>
<p lang="en-US">會被選中</p>

該選擇器等同於 [lang|="language"]，是 [attribute|="value"] 選擇器的一種特例。

結構僞類選擇器

:nth-child(n)，選擇同級元素中的第 n 個元素，例如 ul > li:nth-child(2)：

<ul>
  <li>不會被選中</li>
  <li>第二個元素會被選中</li>
  <li>不會被選中</li>
</ul>

須要注意的是子元素的下標是從 1 開始的。除了能夠指定特定的數字，也可使用 even（偶數）, odd（奇數） 關鍵字，例如 ul > li:nth-child(odd)，或者使用公式，例如 ul > li:nth-child(2n+1)（n 是計數器，從 0 開始）：

<ul>
  <li>第一個子元素會被選中</li>
  <li>第二個子元素不會被選中</li>
  <li>第三個子元素會被選中</li>
</ul>

:nth-last-child(n)，同上，不過是從最後一個子元素開始計數，使用該選擇器能夠實現隔行變色的效果。

:first-child，選擇同級元素中的第一個元素，例如 ul > li:first-child：

<ul>
  <li>會被選中</li>
  <li>不會被選中</li>
  <li>不會被選中</li>
</ul>

做用等同於 ul > li:nth-child(1)。

:last-child，選擇同級元素中的最後一個元素，例如 ul > li:last-child：

<ul>
  <li>不會被選中</li>
  <li>不會被選中</li>
  <li>會被選中</li>
</ul>

做用等同於 ul > li:nth-last-child(1)。

:only-child，用於選擇父元素下惟一的子元素，例如 ul > li:only-child：

<ul>
  <li>惟一子元素，會被選中</li>
</ul>

<ul>
  <li>不會被選中</li>
  <li>不會被選中</li>
</ul>

:nth-of-type(n)，選擇同級元素中的第 n 個同類元素，和 :nth-child 相似，例如 .box > :nth-of-type(2)：

<div class="box">
  <p>第一個 p 子元素，不會被選中</p>
  <span>第一個 span 子元素，不會被選中</span>
  <p>第二個 p 子元素，會被選中</p>
  <span>第二個 span 子元素，會被選中</span>
</div>

:nth-last-of-type，同上，不過是從最後一個同類子元素開始計數。

:first-of-type，選擇同級元素中的第一個同類元素，等同於 :nth-of-type(1)。

:last-of-type，選擇同級元素中的最後一個同類元素，等同於 nth-last-of-type(1)。

:only-of-type，用於選擇父元素下特定類型的惟一子元素，例如 .box > :only-of-type：

<div class="box">
  <p>不會被選中</p>
  <em>惟一的 em 子元素會被選中</em>
  <p>不會被選中</p>
  <span>惟一的 span 子元素會被選中</span>
</div>

:root 選擇器

:root，選擇文檔的根元素，對於 HTML 文檔就是 html 元素。

:empty 僞類選擇器

:empty，選擇沒有子元素的元素（包括文本節點），例如：

p:empty {
  display: none;
}

表示隱藏沒有內容的 p 元素，

<p>非空不會被選中</p>
<p></p> <!-- 爲空會被選中 -->

否認僞類選擇器

:not(selector)，選擇全部不匹配選擇器的元素，例如 :not(p)，選擇全部不爲 p 的元素：

<p>不會被選中</p>
<span>會被選中</span>

要選擇既不是 p 也不是 span 的元素能夠屢次使用否認僞類選擇器，例如 :not(p):not(span)，須要同時知足條件的元素纔會被選中。

CSS 4 否認僞類選擇器支持傳入參數列表，好比 :not(p, span)。

僞元素

僞元素選擇器用於選擇那些如有實無的元素。在 CSS3 中，僞元素的寫法爲兩個冒號，爲了兼容舊瀏覽器，也可使用一個冒號。

首字母僞元素選擇器

::first-letter，選擇元素的第一個字母，例如：

p::first-letter {
  font-size: 300%;
}

段落元素的首字母放大。

首行僞元素選擇器

::first-line，選擇元素的第一行，例如：

p::first-line {
  text-decoration: underline;
}

段落元素的首行添加下劃線。

::before/::after 僞元素選擇器

::before，選擇在元素以前插入的生成內容。

::after，選擇在元素以後插入的生成內容，例如：

<blockquote>Lorem ipsum dolor sit amet.</blockquote>

和樣式：

blockquote::before {
  content: "\0022";
}

blockquote::after {
  content: "\0022";
}

::selection 僞元素選擇器

::selection，選擇用戶選取的內容，例如：

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

參考資料

• ::first-letter CSS pseudo-element selector
• ::selection CSS pseudo-element
• CSS 2.1 selectors
• CSS3 selectors