CSS 选择器整理：写样式之前，先把元素选对

CSS 里最基础的一步，其实不是写什么样式，而是先把元素选对。

如果选择器本身理解不清楚，后面写出来的样式很容易出现：

• 命中了不该命中的元素
• 优先级不好控制
• 结构一变样式就失效

所以选择器虽然基础，但值得认真整理一下。

最常见的几种选择器

日常开发里最常见的通常有：

• 标签选择器
• 类选择器
• ID 选择器

例如：

复制
1p {}
2.title {}
3#app {}

其中类选择器通常是最常用的，因为它既灵活，又不会像 ID 那样过于绑定唯一结构。

后代选择器和子选择器不要混

这是很多初学者容易混淆的地方。

复制
1.card p {}
2.card > p {}

第一种表示选中 .card 内部所有后代 p。

第二种表示只选中 .card 的直接子元素 p。

看起来只是一个符号差异，但实际命中范围差很多。

并列选择器和多类选择器也不同

例如：

复制
1.title.highlight {}
2.title, .highlight {}

前者表示同一个元素同时拥有两个类。

后者表示匹配两个不同规则集合。

这类细节如果没搞清楚，写样式时很容易误判作用范围。

伪类和伪元素的作用

CSS 里还有两类很常用的能力：

• 伪类
• 伪元素

例如：

复制
1a:hover {}
2li:first-child {}
3p::before {}

伪类更偏向元素状态，伪元素更偏向附加生成内容。

选择器不要写得过深

样式后期失控，一个常见原因就是选择器链写得太长。

例如：

复制
1.page .content .list .item .title {}

这种写法短期看很精确，长期看却会带来两个问题：

• 结构耦合过强
• 后期难以复用和覆盖

所以选择器不是越精确越好，而是要在清晰和可维护之间平衡。

写在最后

CSS 选择器看起来只是基础语法，但它直接决定了样式命中范围和后期维护成本。

写样式之前，先把元素选对，比后面不断修补覆盖更重要。基础打稳之后，很多样式问题其实一开始就可以避免。