WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

1-7. CSS 選取器 有哪些?

「選取器」是 CSS 樣式規則的規則名稱,也就是要選擇來設計的物件,先瀏覽認識一下,接下來的練習時可以再反覆回來加強複習。

基本選取器

選取器 舉例 說明 版本 參考
* * 萬用選取器, 代表了所有的選取器。 2 英文簡中
tag標籤名稱 div 針對HTML標籤元素名稱當選取器。 1 英文簡中
#ID名稱 #content 針對HTML標籤元素設定的ID名稱當選取器。 1 英文簡中
.class類別名稱 .container 針對HTML標籤元素設定的class類別名稱當選取器。 1 英文簡中
選取器 , 選取器 div , p 同時設定多個選取器。 1 英文簡中

複合選取器

選取器 舉例 說明 版本 參考
選取器  選取器 div  p 定義指定外層選取器 div 內的 "子" "孫" 元素 p 當選取器。 1 英文簡中
選取器 > 選取器 div > p 定義指定外層選取器 div 內的 "子" 元素 p 當選取器。 2 英文簡中
選取器 + 選取器 div + p 定義緊接在 div 後方同一層的元素 p 當選取器。 2 英文簡中
選取器 ~ 選取器 div ~ p 定義在 div 後方同一層的所有元素 p 當選取器。 3 英文簡中

偽元素選取器 (所謂偽元素代表並非在DOM結構中的元素)

選取器 舉例 說明 版本 參考
::after 或 :after div::after 在指定選取器 div 內的後方位置。 2 英文簡中
::before 或 :before div::before 在指定選取器 div 內的前方位置。 2 英文簡中
::first-letter 或 :first-letter p::first-letter 在指定選取器 p 內的第一個字元。 1 英文簡中
::first-line 或 :first-line p::first-line 在指定選取器 p 內的第一行。 1 英文簡中
::selection ::selection 滑鼠拖曳選取的部份。 3 英文簡中

虛擬類別選取器

選取器 舉例 說明 版本 參考
:link a:link 連結標籤元素未點選存取時。 1 英文簡中
:visited a:visited 連結標籤元素已點選存取過。 1 英文簡中
:hover a:hover 連結標籤元素當滑鼠滑入上方時。 1 英文簡中
:active a:active 連結標籤元素當滑鼠在上方按著未放時。 1 英文簡中
:focus input:focus 使用滑鼠或鍵盤讓焦點停在元素上時。 2 英文簡中
:target a:target 連結錨點時, 當按下連結時, 設定錨點位置為選取器。 3 英文簡中
:lang p:lang(it) 設定帶有指定 lang 屬性的元素為選取器。 2 英文簡中

過濾挑選選取器

選取器 舉例 說明 版本 參考
:first-child p:first-child 符合左側指定的元素, 並且是所屬層次中的第一個子元素。 2 英文簡中
:first-of-type p:first-of-type 在所屬層次中符合左側指定元素的第一個元素。 3 英文簡中
:last-child p:last-child 符合左側指定的元素, 並且是所屬層次中的最後一個子元素。 3 英文簡中
:last-of-type p:last-of-type 在所屬層次中符合左側指定元素的最後一個元素。 3 英文簡中
:only-child p:only-child 符合左側指定的元素, 並且是所屬層次中的唯一子元素。 3 英文簡中
:only-of-type p:only-of-type 在所屬層次中符合指定元素p, 並且只有一個指定元素p。 3 英文簡中
:nth-child(n) p:nth-child(n) 符合左側指定的元素, 並且是所屬層次中符合第 n 個子元素。 3 英文簡中
:nth-of-type(n) p:nth-of-type(n) 在所屬層次中符合第 n 個指定元素 p。 3 英文簡中
:nth-last-child(n) p:nth-last-child(n) 符合左側指定的元素, 並且是所屬層次中符合倒數第 n 個子元素。 3 英文簡中
:nth-last-of-type(n) p:nth-last-of-type(n) 在所屬層次中符合倒數第 n 個指定元素 p。 3 英文簡中
:not(選取器) :not(p) 排除指定標籤之外的符合元素為選取器。 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 [href ^= "https"] 選擇每一個 src 屬性的值以 "https" 開頭的元素。 3 英文簡中
[attribute屬性$=value] a [href $= ".pdf"] 選擇每一個 src 屬性的值以 ".pdf" 结尾的元素。 3 英文簡中
[attribute屬性*=value] a [href *= "w3schools"] 選擇每一個 src 屬性的值 包含 字串 "w3schools" 的元素。 3 英文簡中

表單元素選取器

選取器 舉例 說明 版本 參考
:enabled input:enabled 選擇每一個已啟用的輸入元素。 3 英文簡中
:disabled input:disabled 選擇每一個禁用的輸入元素。 3 英文簡中
:checked input:checked 選擇每個已勾選的核取方塊元素。 3 英文簡中
:out-of-range :out-of-range 當輸入值超出指定範圍之外的輸入元素。 3 英文簡中
:in-range :in-range 當輸入值在指定範圍之內的輸入元素。 3 英文簡中
:read-only :read-only 選擇已設定 "readonly" 只供讀取屬性的元素。 3 英文簡中
:optional :optional 選擇沒有設定 "required" 必填屬性的元素。 3 英文簡中
:required :required 選擇設定了 "required" 必填屬性的元素。 3 英文簡中
:valid :valid 選擇輸入值為有效的元素。 3 英文簡中
:invalid :invalid 選擇輸入值為無效的元素。 3 英文簡中

其他 CSS 選取器 (規則名稱) 列表介紹

 

go TOP