Selector 範例集

本文針對《CSS 速用表》的 Selectors 一節提供範例與說明～

Element

* { font-family:文泉驛正黑 }	所有元素的字體為文泉驛正黑。
p { color:red }	設定 p 元素的顏色為 red。
article p { color:red }	設定 article 裡面的 p 元素顏色為 red。
article > p { color:red }	設定父元素為 article 的 p 元素顏色為 red。
h1, h2 { color:red }	設定 h1 與 h2 元素的顏色為 red。
p + p	p 後面緊接著的 p 元素。
p ~ p	p 後面的所有 p 元素。
:root { background:black }	設定根元素背景為 black，相當於 html 元素。

Child

div:empty { background:red }	將子元素為空的 div 元素，背景設為 red 顏色。
p:first-of-type { color:red }	設定第一個 p 元素的顏色為 red。
p:last-of-type { color:red }	設定最後一個 p 元素的顏色為 red。
p:nth-of-type(2) { color:red }	設定第二個 p 元素的顏色為 red。
p:nth-last-of-type(2){ color:red }	設定倒數第二個 p 元素的顏色為 red。
p:only-of-type { color:red }	只有一個 p 子元素時，顏色為 red。
p:first-child { color:red }	設定第一個子元素為 p 的顏色為 red。
p:last-child { color:red }	設定最後一個子元素為 p 的顏色為 red。
p:nth-child(2) { color:red }	設定 p 的第二個子元素顏色為 red。
p:nth-last-child(2){ color:red }	設定 p 的倒數第二個子元素顏色為 red。
p:only-child { color:red }	只有一個子元素為 p 時，顏色為 red。

補充

nth-child() 與 nth-last-child() 還可以使用 even 表示第奇數個的元素，以及 odd 表示第偶數個的元素。甚至可用 3n 表示每三個元素，個數依此類推。

說明

p:nth-of-type(2) 的意思是指定第二個 p 元素，例如下面這個例子是成立的：

<article> <p>111</p> <p>222</p>  <p>333</p> </article>
但如下例子就不符合條件了：

<article> <h1>111</h1> <p>222</p>  <i>333</i> </article>
p:nth-child(2) 的意思是指定 p 元素，且它是某父元素的第二的子元素，因此下兩個例子都是成立的：

<article> <p>111</p> <p>222</p>  <p>333</p> </article>
<article> <h1>111</h1> <p>222</p>  <i>333</i> </article>
用 -child 容易會錯意，所以建議用 -of-type 比較不會出錯。

Content

p::after { content:'》' }	在 p 元素文字結尾插入》符號。
p::before { content:'《' }	在 p 元素文字開頭插入《符號。
p::first-letter { font-size:26px }	設定 p 元素的第一個字為 26px 大小。
p::first-line { color:red }	設定 p 元素的第一行文字顏色為 red。

Attribute

.new { color:red }	設定 class 屬性為 new 的元素顏色為 red。
#deprecated { color:red }	設定 id 屬性 deprecated 的元素顏色為 red。
p:lang(zh) { color:red }	設定 lang 屬性為 zh 的 p 元素顏色為 red。
[title] { color:red }	設定所有用到 title 屬性的元素顏色為 red。
[title=草稿中] { color:red }	設定所有 title 為「草稿中」的元素顏色為 red。
img[src^=big] { width:640px }	設定 src 以 empty 開頭的 img 寬度為 640 像素。
img[src$=png] { width:100px }	設定 src 以 png 結尾的 img 寬度為 100 像素。
img[src*=sexy] { width:0 }	設定 src 含 sexy 字串的 img 寬度為 0。
img[src\|=sexy] { width:0 }	設定 src 以 sexy 開頭接 - 的 img 寬度為 0。
img[src~=sexy] { width:0 }	設定 src 以 sexy 開頭接空白的 img 寬度為 0。

說明

|= 需要進一步舉例才搞得清楚！如下圖檔名稱就符合 img[src|=sexy] 的條件：

<img src='sexy-18x.png'/>

但這樣的話就不符合：

<img src='small-sexy-18x.jpg'/>

也就是必須以 sexy 開頭，而且以 - 間隔開來。

~= 的話，下面兩者都符合 img[src~=sexy] 的條件：

<img src='sexy 18x.jpg'/> <img src='small sexy 18x.jpg'/>
還是搞不清楚沒關係，乾脆禁用 |= 與 ~= 這 CSS2 的產物吧！使用 CSS3 的 ^= 和 *= 就夠了。

Link or Action

:link { color:green }	設定超鍊結文字顏色為 green。
:visited { color:pink }	設定已參訪超鍊結文字顏色為 pink。
:hover { color:orange }	設定滑鼠移置上方的超鍊結文字顏色為 orange。
:active { color:red }	設定被點選中超鍊結文字顏色為 red。
:target { color:purple }	設定進入錨點目標後的顏色為 red。

說明

建議照如上順序設定，否則會有類似覆寫的情況發生，導致看不見效果。

其中 :target 用法需要進一步說明，如下超鍊結指向 id 為 test 的錨點：

<a href='#test'>Click me</a> <p id='test'>Hello</p>
按下 a 之後，p 的 color 就會變成 purple。

Input

input:checked { left:5px }	被核取的 input 元件往右縮排 5 像素。
input:disabled { left:5px }	禁用狀態的 input 元件往右縮排 5 像素。
input:enabled { left:5px }	啟用狀態的 input 元件往右縮排 5 像素。
input:focus { left:5px }	駐點狀態的 input 元件往右縮排 5 像素。
input:in-range { left:5px }	數值在 min 到 max 範圍內的 input 往右 5 像素。
input:invalid { left:5px }	資料驗證無效的 input 元件往右縮排 5 像素。
input:optional { left:5px }	被圈選的 input 元件往右縮排 5 像素。
input:out-of-range { left:5px }	數值超過 min 到 max 範圍的 input 往右 5 像素。
input:read-only { left:5px }	唯讀狀態的 input 元件往右縮排 5 像素。
input:read-write { left:5px }	可寫狀態的 input 元件往右縮排 5 像素。
input:required { left:5px }	必填資料的 input 元件往右縮排 5 像素。
input:valid { left:5px }	資料驗證有效的 input 元件往右縮排 5 像素。

說明

要測試如上範例的話，記得設定 input 元件的 position 為 relative，否則 left 不會有效果。或者將 left 改為 margin-left 來測試。

Other

p:not(.new) { color:red }	除非 p 的 class 為 new 否則顏色為 red。
p::selection { background:red }	p 的文字被選取時背景為 red。