CSS選擇器例項

阿新 • • 發佈：2018-12-26

元素選擇器

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>

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

首行偽元素選擇器

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

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

段落元素的首行新增下劃線。

first-line

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

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

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

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

和樣式：

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

before-after

::selection 偽元素選擇器

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

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