CSS 选择器的主要类型有哪些？

Question

CSS 选择器的主要类型有哪些？

Accepted Answer

选择器用于指定规则应用于哪些元素。它们的范围从简单的（按标签）到强大的组合选择器。 ```css /* Basic selectors */ p { } /* type: all

*/ .card { } /* class: elements with class="card" (reusable) */ #header { } /* id: the one element with id="header" (unique) */ * { } /* universal: every element */ [type="text"]{ } /* attribute: inputs with type=text */ ``` ## 组合选择器 — 元素之间的关系 ```css .menu li { } /* descendant: any li INSIDE .menu (any depth) */ .menu > li { } /* child: only DIRECT children li */ h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */ h2 ~ p { } /* general sibling: all p siblings after an h2 */ ``` 空格（后代）和 `>` （直接子元素）之间的区别很重要：`.menu li` 匹配深层嵌套的 `li` 元素，而 `.menu > li` 仅匹配顶层元素。 ## 伪类和伪元素 ```css a:hover { } /* state: while hovered */ li:first-child { } /* structural: the first li */ li:nth-child(2n){ } /* every even li */ p::first-line { } /* pseudo-element: the first rendered line */ ``` ## 分组和现代选择器 ```css h1, h2, h3 { } /* apply to all three */ :is(h1, h2) a { } /* :is() shortens long selector lists */ .card:has(img) { } /* :has() — a parent that CONTAINS an img */ ``` ## 为什么这很重要选择器是将样式与标签相关联的方式。掌握类选择器（主要工具）、组合选择器（用于表达关系）和结构/状态伪类使你能够精确定位元素，而无需到处添加额外的类 — 现代的 `:is()`/`:has()` 使复杂的定位更加简洁。优先使用类选择器而不是 id/深层嵌套，以保持选择器优先级的可管理性。