CSS選擇器實例

元素選擇器

E，選擇所有指定元素名稱的元素，例如 p，選擇所有的 p 元素。

通用選擇器

*，選擇所有元素，例如：

1.  
    
2.  
   * {
3.  
   box-sizing: border-box;
4.  
   }

類選擇器

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

1.  
    
2.  
   <div class="header">會被選中</div>
3.  
    
4.  
   <h2 class="header">也會被選中</h2>

多類選擇器

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

1.  
    
2.  
   <div class="collapse in">會被選中</div>
3.  
   <div class="collapse">不會被選中</div>
4.  
   <div class="in">不會被選中</div>

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

ID 選擇器

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

1.  
    
2.  
   <h2 id="title"></h2>

上下文選擇器

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

1.  
    
2.  
   <p>
3.  
   <span>會被選中</span>
4.  
   <strong><span>同樣會被選中</span></strong>
5.  
   </p>

子元素選擇器

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

1.  
    
2.  
   <p>
3.  
   <span>父元素是 p 會被選中</span>
4.  
   <strong><span>父元素是 strong 不會被選中</span></strong>
5.  
   </p>

相鄰元素選擇器

selector + selector，用於選擇一個特定元素之后緊跟的元素，h2 + p，選擇所有相鄰 h2 元素之后的同級 p 元素。

1.  
    
2.  
   <div>
3.  
   <p>h2 之前的不會被選中</p>
4.  
   <h2>示例</h2>
5.  
   <p>緊鄰 h2 的會被選中</p>
6.  
   <p>不會被選中</p>
7.  
   </div>

同級元素選擇器

selector ~ selector，用於選擇特定元素之后的同級元素，h2 ~ p，選擇所有 h2 元素之后的同級 p 元素。

1.  
    
2.  
   <div>
3.  
   <p>不會被選中</p>
4.  
   <h2>示例</h2>
5.  
   <p>h2 之后的同級 p 元素會被選中</p>
6.  
   <span>示例</span>
7.  
   <p>h2 之后的同級 p 元素會被選中</p>
8.  
   </div>

同級元素選擇器選擇特定元素之后的所有同級元素，而相鄰元素選擇器只選擇特定元素之后緊鄰的那個元素。

屬性名選擇器

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

1.  
    
2.  
   <a title="link">會被選中</a>
3.  
   <a>不會被選中</a>

屬性值選擇器

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

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

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

1.  
    
2.  
   <a title="link">會被選中</a>
3.  
   <a title="this is a link">屬性值中包含 link 會被選中</a>
4.  
   <a title="thisisalink">不會被選中</a>
5.  
   <a title="other">不會被選中</a>

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

1.  
    
2.  
   <a title="red">會被選中</a>
3.  
   <a title="red-hot">會被選中</a>
4.  
   <a title="redhot">不會被選中</a>

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

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

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

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

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

1.  
    
2.  
   <a title="red">會被選中</a>
3.  
   <a title="redhot">會被選中</a>
4.  
   <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，選擇目標元素。當用戶點擊一個指向頁面中其它元素的鏈接，則那個被指向的元素就是目標元素，例如：

1.  
    
2.  
   <a href="#more">more</a> <!-- 點擊這個鏈接之后 -->
3.  
    
4.  
   <div id="more">...</div> <!-- 這個元素會被 :target 選中 -->

:enabled，選擇所有已啟用的元素。

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

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

1.  
    
2.  
   input[type="text"]:disabled {
3.  
   background-color: #eee;
4.  
   }

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

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

:checked，選擇所有已經被勾選的單選框或者復選框，例如 input:checked。

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

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

:lang 選擇器

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

1.  
    
2.  
   <p lang="en">會被選中</p>
3.  
   <p lang="en-US">會被選中</p>

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

結構偽類選擇器

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

1.  
    
2.  
   <ul>
3.  
   <li>不會被選中</li>
4.  
   <li>第二個元素會被選中</li>
5.  
   <li>不會被選中</li>
6.  
   </ul>

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

1.  
    
2.  
   <ul>
3.  
   <li>第一個子元素會被選中</li>
4.  
   <li>第二個子元素不會被選中</li>
5.  
   <li>第三個子元素會被選中</li>
6.  
   </ul>

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

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

1.  
    
2.  
   <ul>
3.  
   <li>會被選中</li>
4.  
   <li>不會被選中</li>
5.  
   <li>不會被選中</li>
6.  
   </ul>

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

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

1.  
    
2.  
   <ul>
3.  
   <li>不會被選中</li>
4.  
   <li>不會被選中</li>
5.  
   <li>會被選中</li>
6.  
   </ul>

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

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

1.  
    
2.  
   <ul>
3.  
   <li>唯一子元素，會被選中</li>
4.  
   </ul>
5.  
    
6.  
   <ul>
7.  
   <li>不會被選中</li>
8.  
   <li>不會被選中</li>
9.  
   </ul>

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

1.  
    
2.  
   <div class="box">
3.  
   <p>第一個 p 子元素，不會被選中</p>
4.  
   <span>第一個 span 子元素，不會被選中</span>
5.  
   <p>第二個 p 子元素，會被選中</p>
6.  
   <span>第二個 span 子元素，會被選中</span>
7.  
   </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：

1.  
    
2.  
   <div class="box">
3.  
   <p>不會被選中</p>
4.  
   <em>唯一的 em 子元素會被選中</em>
5.  
   <p>不會被選中</p>
6.  
   <span>唯一的 span 子元素會被選中</span>
7.  
   </div>

:root 選擇器

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

:empty 偽類選擇器

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

1.  
    
2.  
   p:empty {
3.  
   display: none;
4.  
   }

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

1.  
    
2.  
   <p>非空不會被選中</p>
3.  
   <p></p> <!-- 為空會被選中 -->

否定偽類選擇器

:not(selector)，選擇所有不匹配選擇器的元素，例如 :not(p)，選擇所有不為 p 的元素：

1.  
    
2.  
   <p>不會被選中</p>
3.  
   <span>會被選中</span>

要選擇既不是 p 也不是 span 的元素可以多次使用否定偽類選擇器，例如 :not(p):not(span)，需要同時滿足條件的元素才會被選中。

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

偽元素

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

首字母偽元素選擇器

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

1.  
    
2.  
   p::first-letter {
3.  
   font-size: 300%;
4.  
   }

段落元素的首字母放大。

首行偽元素選擇器

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

1.  
    
2.  
   p::first-line {
3.  
   text-decoration: underline;
4.  
   }

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

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

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

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

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

和樣式：

1.  
    
2.  
   blockquote::before {
3.  
   content: "\0022";
4.  
   }
5.  
    
6.  
   blockquote::after {
7.  
   content: "\0022";
8.  
   }

::selection 偽元素選擇器

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

1.  
    
2.  
   ::selection {
3.  
   background: #b3d4fc;
4.  
   text-shadow: none;
5.  
   }