CSS 選擇器參考手冊

CSS 選擇器

CSS 選擇器用于“查找”（或選擇）您想要設置樣式的 HTML 元素。

使用我們的 CSS 選擇器測試器來演示不同的選擇器。

CSS 簡單選擇器

簡單選擇器根據元素名稱、id 和類選擇元素。此外，還有通用選擇器（*）。

選擇器 例子 例子描述
element p 選擇所有 <p> 元素。
#id #firstname 選擇 id="firstname" 的元素。
* * 選擇所有元素。
.class .intro 選擇 class="intro" 的所有元素。

CSS 屬性選擇器

屬性選擇器選擇具有給定屬性集的 HTML 元素。

選擇器 例子 例子描述
[attribute] [target] 選擇帶有 target 屬性的所有元素。
[attribute=value] [target=_blank] 選擇帶有 target="_blank" 屬性的所有元素。
[attribute~=value] [title~=flower] 選擇 title 屬性包含單詞 "flower" 的所有元素。
[attribute|=value] [lang|=en] 選擇 lang 屬性值以 "en" 開頭的所有元素。
[attribute^=value] a[href^="https"] 選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。
[attribute$=value] a[href$=".pdf"] 選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。
[attribute*=value] a[href*="codew3c"] 選擇其 href 屬性值中包含 "abc" 子串的每個 <a> 元素。

CSS 嵌套選擇器

選擇器 例子 例子描述
& & 在另一個元素的上下文中為元素應用樣式