CSS 選擇器結構

簡單選擇器

簡單選擇器是具有單個元件的選擇器，例如單個型別選擇器、屬性選擇器或偽類，它不與其他任何選擇器元件或組合器組合使用或包含。當一個簡單選擇器準確描述一個元素時，該元素被認為匹配該簡單選擇器。任何包含單個基本選擇器、屬性選擇器、偽類或偽元素選擇器的選擇器都是簡單選擇器。

#myId {
}

[pattern*="\d"] {
}

複合選擇器

複合選擇器是一系列簡單選擇器，它們之間沒有用組合器分隔。複合選擇器表示對單個元素的一組同時條件。當一個給定元素匹配複合選擇器中的所有簡單選擇器時，該元素被認為匹配複合選擇器。

a#selected {
}

[type="checkbox"]:checked:focus {
}

在複合選擇器中，型別選擇器或通用選擇器必須在選擇器序列中首先出現。序列中只允許一個型別選擇器或通用選擇器。由於空格表示後代組合器，因此構成複合選擇器的簡單選擇器之間不允許有空格。

複雜選擇器

複雜選擇器是由一個或多個簡單選擇器和/或複合選擇器組成的序列，這些選擇器由組合器分隔，包括空格後代組合器。

複雜選擇器表示對一組元素的一組同時條件。

a#selected > .icon {
}

.box h2 + p {
}

選擇器可以從右到左閱讀。例如，a#selected > .icon匹配所有具有類icon且是id為selected的<a>元素的直接子元素的元素。選擇器.box h2 + p匹配緊跟在任何類為box的元素的後代<h2>元素之後的第一個<p>元素。

選擇器列表

選擇器列表是逗號分隔的簡單、複合和/或複雜選擇器列表。當一個給定元素匹配該選擇器列表中的任何（至少一個）選擇器時，該元素被認為匹配選擇器列表。

#main,
article.heading {
}

如果非寬容選擇器列表中的任何選擇器無效，則整個選擇器列表都將失效。

#main,
:bad-pseudoclass,
.validClass {
  /* `:bad-pseudoclass` is invalid, invalidating this style block */
}

:is()和:where()偽類可用於構造寬容選擇器列表。

相對選擇器

相對選擇器是表示相對於一個或多個錨元素的元素的選擇器，前面帶有組合器。不以顯式組合器開頭的相對選擇器具有隱式的後代組合器。

相對選擇器不能在選擇器列表中使用。相反，它在某些上下文中被接受，例如:has()偽類。

:has(+ div#topic > #reference) {
}

:has(> .icon) {
}

dt:has(+ img) ~ dd {
}

規範

另見

• CSS 選擇器和組合器
• 寬容選擇器列表
• Document.querySelector()
• Document.querySelectorAll()
• CSS 選擇器模組
• CSS 偽元素模組