[TOC] # CSS選擇器參考手冊 > 在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。 ## 選擇器分類參考表 | 選擇器| 示例| 學習CSS的教程| |:---|:---|:---| | 類型選擇器| h1 | 類型選擇器| | 通配選擇器| * | 通配選擇器| | 類選擇器| .box | 類選擇器| | ID選擇器| #unique | ID選擇器| | 標簽屬性選擇器| a[title]| 標簽屬性選擇器| | 后代選擇器| article p| 后代選擇器(空格)| | 子代選擇器| article > p| 子代選擇器(大于號)| | 相鄰兄弟選擇器| h1 + p| 相鄰兄弟| | 通用兄弟選擇器| h1 ~ p| 通用兄弟| | 偽類選擇器| p:first-child| 偽類| | 偽元素選擇器| p::first-line| 偽元素| ## 選擇器詳細參考表 >"CSS" 列指示該屬性是在哪個 CSS 版本中定義的。（CSS1、CSS2 還是 CSS3。） |選擇器 |例子 |例子描述 |CSS | | :------| :------| :---------| :----| |.class |.intro |選擇 class="intro" 的所有元素。 |1 | |#id |#firstname |選擇 id="firstname" 的所有元素。 |1 | |* |* |選擇所有元素。 |2 | |element |p |選擇所有 \<p> 元素。 |1 | |element1,element2 |div,p |選擇所有 \<div> 元素和所有 \<p> 元素。 |1 | |element1 element2 |div p |選擇 \<div> 元素內部的所有 \<p> 元素。 |1 | |element1>element2 |div>p |選擇父元素為 \<div> 元素的所有 \<p> 元素。 |2 | |element1+element2 |div+p |選擇緊接在 \<div> 元素之后的所有 \<p> 元素。 |2 | |element1~element2 |p~ul |選擇前面有 \<p> 元素的每個 \<ul> 元素。 |3 | |[attribute] |[target] |選擇帶有 target 屬性所有元素。 |2 | |[attribute=value] |[target=_blank] |選擇 target="_blank" 的所有元素。 |2 | |[attribute~=value] |[title~=flower] |選擇 title 屬性包含單詞 "flower" 的所有元素。 |2 | |[attribute\|=value] |[lang\|=en] |選擇 lang 屬性值以 "en" 開頭的所有元素。 |2 | |[attribute^=value] |a[src^="https"] |選擇其 src 屬性值以 "https" 開頭的每個 \<a> 元素。 |3 | |[attribute\$=value] |a[src\$=".pdf"] |選擇其 src 屬性以 ".pdf" 結尾的所有 \<a> 元素。 |3 | |[attribute*=value] |a[src*="abc"] |選擇其 src 屬性中包含 "abc" 子串的每個 \<a> 元素。 |3 | |:link |a:link |選擇所有未被訪問的鏈接。 |1 | |:visited |a:visited |選擇所有已被訪問的鏈接。 |1 | |:active |a:active |選擇活動鏈接。 |1 | |:hover |a:hover |選擇鼠標指針位于其上的鏈接。 |1 | |:focus |input:focus |選擇獲得焦點的 input 元素。 |2 | |:first-letter |p:first-letter |選擇每個 \<p> 元素的首字母。 |1 | |:first-line |p:first-line |選擇每個 \<p> 元素的首行。 |1 | |:first-child |p:first-child |選擇屬于父元素的第一個子元素的每個 \<p> 元素。 |2 | |:before |p:before |在每個 \<p> 元素的內容之前插入內容。 |2 | |:after |p:after |在每個 \<p> 元素的內容之后插入內容。 |2 | |:lang(language) |p:lang(it) |選擇帶有以 "it" 開頭的 lang 屬性值的每個 \<p> 元素。 |2 | |:first-of-type |p:first-of-type |選擇屬于其父元素的首個 \<p> 元素的每個 \<p> 元素。 |3 | |:last-of-type |p:last-of-type |選擇屬于其父元素的最后 \<p> 元素的每個 \<p> 元素。 |3 | |:only-of-type |p:only-of-type |選擇屬于其父元素唯一的 \<p> 元素的每個 \<p> 元素。 |3 | |:only-child |p:only-child |選擇屬于其父元素的唯一子元素的每個 \<p> 元素。 |3 | |:nth-child(n) |p:nth-child(2) |選擇屬于其父元素的第二個子元素的每個 \<p> 元素。 |3 | |:nth-last-child(n) |p:nth-last-child(2) |同上，從最后一個子元素開始計數。 |3 | |:nth-of-type(n) |p:nth-of-type(2) |選擇屬于其父元素第二個 \<p> 元素的每個 \<p> 元素。 |3 | |:nth-last-of-type(n) |p:nth-last-of-type(2) |同上，但是從最后一個子元素開始計數。 |3 | |:last-child |p:last-child |選擇屬于其父元素最后一個子元素每個 \<p> 元素。 |3 | |:root |:root |選擇文檔的根元素。 |3 | |:empty |p:empty |選擇沒有子元素的每個 \<p> 元素（包括文本節點）。 |3 | |:target |#news:target |選擇當前活動的 #news 元素。 |3 | |:enabled |input:enabled |選擇每個啟用的 \<input> 元素。 |3 | |:disabled |input:disabled |選擇每個禁用的 \<input> 元素 |3 | |:checked |input:checked |選擇每個被選中的 \<input> 元素。 |3 | |:not(selector) |:not(p) |選擇非 \<p> 元素的每個元素。 |3 | |::selection |::selection |選擇被用戶選取的元素部分。 |3 |