屬性選擇器

Attribute Selector［屬性選擇器］

選擇class屬性值「以xx開頭」的元素

元素名稱[屬性名稱^=“特定開頭”]

選擇具有特定屬性，且屬性值是以“特定開頭”的元素標籤

class="STARTxx"
class="xxSTART"
class="xxSTARTxx"

選擇class屬性值「以xx結尾」的元素

元素名稱[屬性名稱$=“特定結尾”]

選擇具有特定屬性，且屬性值是以“特定結尾”的元素標籤

class="ENDxx"
class="xxEND"
class="xxENDxx"

選擇class屬性值「包含xx」的元素

元素名稱[屬性名稱*=“特定字眼”]：

選擇具有特定屬性，且屬性值包含“特定字眼”的元素標籤

class="CNTxx"
class="xxCNT"
class="xxCNTxx"

依連結類型顯示圖示

Pseudo Class Selector［虛擬類別］

選取子元素的「child」型虛擬類別

child :nth-child(3)
child :nth-last-child(3)
child :nth-child(even)

將第 3 個子元素的文字變成紅色
將倒數第 3 個子元素的文字變成藍色
將偶數個的子元素底色改成 #ccc

child1 (first)
child2
child3
child4
child5
child6
child7 (last)

選取兄弟元素的「of-type」型虛擬類別

ofType :first-of-type
ofType :nth-of-type(even)
ofType :only-of-type

將 .ofType 的第一個元素框線變成紅色
將 .ofType 的第偶數個元素框線變成藍色
將 .ofType 中僅有一個的元素文字變成紅色

heading1 (h4)

paragraph1

heading2 (h4)

paragraph2

heading3 (h5)

paragraph3

選取第偶數個子元素 E

E:nth-child(even)

雙色條紋表格

White	White
Gray	Gray
White	White
Gray	Gray

Other Pseudo Class Selector［其它虛擬類別］

否定虛擬類別

E:not(s) (不含條件 s 的元素 E )

選取除了最後一個子元素外，其他的元素

list1
list2
list3
list4
list5

目標虛擬類別

E:target ( 選取「點擊時」 href 路徑所指向的目標元素 E )

只有在點擊連結時，對應的目的地元素才會顯示出來

MENU1: 哈囉哈囉哈囉哈囉哈囉哈囉哈囉哈囉哈囉
MENU2: 你好你好你好你好你好你好你好你好你好
MENU3: 掰掰掰掰掰掰掰掰掰掰掰掰掰掰掰掰掰掰

UI虛擬類別

E:enabled (有效的表單元素 E )
E:disabled (禁用的表單元素 E )
E:checked (被選中的表單元素 E，例如單選/複選核取框)

可以依據「輸入表單的狀態」選擇元素的虛擬類別，可用來設定表單元素相鄰的 label 元素之樣式。

CSS3 屬性選擇器