CSS选择器从入门到实战：优先级、伪类与层叠规则全解析

1. 先搞清楚选择器在这行里的真实分量

写CSS最让人崩溃的瞬间是什么？不是布局调不动，也不是动画卡顿，而是你明明写了一大段样式，页面却一点反应都没有。去翻代码，选择器写得也没错，浏览器控制台也没有报错，但样式就是死活不生效。这种时候，八成问题就出在CSS选择器上——要么优先级算错了，要么元素根本没被选中，要么被后面的规则覆盖了。

很多小白前端一听到“选择器”三个字就开始慌，觉得它是CSS里面最难啃的一块骨头。其实你完全不用慌。选择器说到底就一句话：告诉浏览器，你这条样式规则到底要作用于页面上的哪些元素。它就像点名，点到了谁，谁就执行对应的样式。

但为什么这么简单的事，会让那么多人绕晕？因为选择器的种类实在太多了，光是组合起来的花样就够写一篇长文。而且它背后还牵着一套优先级规则，谁权重高谁说了算，这套规则在项目一大之后就会频繁跟你过招。

这篇内容就把CSS选择器从基础到进阶全部捋一遍：元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素，还有组合关系选择器，以及最常见的优先级坑。每个部分我都会写上实际的代码示例，附上我在真实项目中踩过的坑和排查方法。不管你是刚入行的前端小白，还是写了几年但因为一直在用框架、很少手写原生CSS的开发者，这篇都能帮你把选择器这块的知识补齐。

我把选择器按功能做了一个总览分类，你可以先有个整体印象：

真正理解了这张表，你再看任何复杂的CSS代码，都能一眼拆出来别人用了哪些选择器、为什么要这样写。后面每一个分类我都会展开讲，并且告诉你哪些用法在实际开发里面真正高频，哪些看着炫酷但实际上很少用得上。

2. 基础选择器：先把“选谁”这件事做对

基础选择器是所有选择器的底子，后面那些复杂的选择器都是在这个基础上做组合和变形。你如果只想记住一部分，那就把基础选择器彻底吃透，因为日常开发中80%以上的场景靠它就能解决。

2.1 元素（标签）选择器

元素选择器就是直接用HTML标签名来选中元素，比如：

css复制p {
  color: #333;
  line-height: 1.8;
}

这样页面上所有的<p>标签都会变成灰色文字、加大行高。它的特点是作用范围最广，但精确度最低。你用得越多，页面里同类标签被“一刀切”的风险就越大。

实际项目中我建议元素选择器只用来做两件事：一是重置或者定义全局的基础样式，比如给body设置字体和背景色；二是配合类选择器做局部覆盖的时候使用。不要用元素选择器去给某个特定区域的样式做定制，否则后面一定会出现“我想改这里结果别的地方也变了”的灵异事件。

2.2 类选择器：前端样式的主力军

类选择器用英文点号开头，比如：

css复制.card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
}

然后在HTML里用class="card"来引用。你可以给同一个元素挂多个类名，比如class="card active"，这样.card定义结构样式、.active定义状态样式，两者互不干扰，这也是类选择器的最大优势——组合和复用非常灵活。

类选择器是CSS里用得最频繁的，几乎所有组件库的样式方案都建立在类选择器之上。这里有个我踩过的坑：项目里有个同学喜欢用“语义化类名”，每个类名都起了七八个单词那么长，结果HTML又长又难读，CSS里到处都是这些长类名。后来我们统一采用短语义加模块命名的方式，比如.login-form、.login-form__title这种，代码可读性才上来。类名这件事，后面我在第六部分再细说。

2.3 ID选择器：能用，但要克制

ID选择器用井号开头：

css复制#header {
  height: 64px;
}

HTML里id="header"对应。它的问题在于，页面中一个ID只能使用一次，这决定了ID选择器天然不具备复用性。而且ID选择器的优先级非常高，一把就压过类选择器，这会导致覆盖样式非常困难。你要想在一个使用ID选择器写死的样式上做微调，就只能再上更重的优先级手段，很容易把自己逼进死角。

我个人的习惯是：ID选择器只用来做两件事。一是锚点定位，比如#article作为页面内跳转目标；二是给JavaScript提供钩子，处理交互逻辑。至于样式，尽量别碰ID。因为CSS类选择器的优先级相对好控制，组件用类名来定义样式，后续不管怎么迭代，改动成本都低。

2.4 通配符选择器：慎用，尤其是新手

星号就是通配符，它会选中页面上的所有元素：

css复制* {
  margin: 0;
  padding: 0;
}

这行代码在早期CSS教程里出现得特别频繁，很多人拿去当“清除默认样式”的万能药。但在稍大一点的页面里，*会在每一个元素上生效，带来不必要的性能损耗。尤其是在列表页、表格页这种元素数以千计的页面上，盲目使用*会让页面渲染变卡。

如果你要重置样式，更精准的做法是直接针对常见的标签做重置，或者在引入现代CSS重置方案时挑明范围。想对所有元素统一设置box-sizing，用这样写也够用：

css复制*,
*::before,
*::after {
  box-sizing: border-box;
}

这种情况用通配符是合理的，因为box-sizing确实需要全局统一。但注意它把::before和::after也带上了，这就是伪元素参与选择器的一个常见例子。

2.5 属性选择器：当你需要按标签属性选人的时候

属性选择器按HTML标签上的属性来匹配元素，最常见的是：

css复制input[type="text"] {
  border: 1px solid #ccc;
}

这段代码把type属性等于text的输入框选中了。还有几个更灵活的模式：

• [href^="https"]：匹配href以https开头的元素，^=是“以...开头”。
• [href$=".pdf"]：匹配href以.pdf结尾的元素，$=是“以...结尾”。
• [title*="关键字"]：匹配title属性中包含“关键字”的元素，*=是“包含”。

我曾经因为这种匹配规则少写了一个字符吃过亏：当时想选中所有外部链接，写成a[href^="http"]，结果忘了URL里还有https，导致一部分链接没被选中。后来全部改为a[href*="://"]才解决。所以在使用属性选择器的时候，一定要想清楚前缀、后缀和包含三种模式的边界，写之前先拿几个真实值套一下。

还有一个很实用的场景是按自定义属性选择，比如[data-status="success"]。这种用data-*自定义属性作为状态标记，配合CSS属性选择器可以直接做状态样式切换，不需要额外加类名。

3. 组合、伪类、伪元素：把选择器当查询语句用

到了这一步，你就不再是只会“点名”了，而是学会“按关系排查”了。CSS选择器的组合关系和你用搜索引擎时的逻辑很像：先限定范围，再缩小结果，最后精准命中目标。

3.1 后代选择器与子元素选择器

后代选择器用空格连接，子元素选择器用大于号连接。看这个例子：

css复制/* 后代选择器：选中 .container 内部的所有 p，不管嵌套多深 */
.container p {
  font-size: 14px;
}

/* 子元素选择器：只选 .list 的直接子元素 li，不往下穿透 */
.list > li {
  padding: 8px 0;
}

两者最大的区别在于层级深度。后代选择器就像“这家公司里的所有人”，只要在这个组织架构内就算；子元素选择器则更像“直接向你汇报的人”，中间不能隔着别人。

实战中我经常看到有人只写空格选择器，导致嵌套太深时出现大面积误伤。比如想给某个区块下的按钮加样式，写成了.box .btn，结果页面其他地方也有.box .btn，也被一起改了。如果改成.box > .btn，就只影响直接子级按钮，范围精确很多。能用>的地方尽量不要用空格，这是我在代码评审时最常给团队成员提的建议之一。

3.2 兄弟选择器：相邻与通用

兄弟选择器有两种。相邻兄弟选择器用加号：

css复制h2 + p {
  color: #666;
}

这表示选中紧跟在h2后面的那个p，中间不能插入其他元素。这个在排版文章时很好用，比如统一标题下的首段样式。

通用兄弟选择器用波浪号：

css复制h2 ~ p {
  color: #999;
}

这表示选中h2后面所有的p兄弟元素，不管中间隔了什么。两种选择器实际用到的地方不算特别多，但在做某些特殊布局时能救急。比如你有一个复选框和一个表单区域，想实现“勾选后激活区域”的效果，可以用input:checked ~ .form-body这种写法，完全不用JavaScript。这种“CSS状态联动”是兄弟选择器配合伪类特别经典的玩法。

3.3 伪类选择器：状态和位置的魔法

伪类选择器能选中“某些状态下”的元素，或者按位置、按逻辑来选。它不像普通选择器那样靠标签名或类名来选，而是靠元素当前的动态状态来决定，这也是它非常有价值的地方。

:hover、:focus、:active这些状态伪类，大家应该很熟了。还有位置类的，比如：

css复制li:nth-child(odd) {
  background: #f9f9f9;
}

tr:nth-of-type(even) {
  background: #f5f5f5;
}

这里要特别注意:nth-child()和:nth-of-type()的区别，这也是面试里高频题，更是实际开发中的坑之一。:nth-child()是按元素在其父元素中的所有兄弟节点里排行老几来算的，不管前面是div还是span，只要排行位置对上就行。而:nth-of-type()是按同类标签里排行老几来算的，它先限定标签类型，再数位置。

我举个例子，你有一个容器，里面结构是<p>、<p>、<span>、<p>。此时p:nth-child(3)选中不了任何元素，因为第三个兄弟节点是span，虽然在p标签里它是第三个p，但:nth-child(3)要的是“全类型排名第三”。而p:nth-of-type(3)就能选中第四个节点里的那个p，因为它在所有p里排第三。初学者最容易在这里翻车。

逻辑伪类里，:not()也很常用：

css复制input:not([type="submit"]) {
  border: 1px solid #ddd;
}

意思是除了提交按钮以外，其他输入框都加边框。还有:is()和:where()，这两个是专门用来给复杂选择器做合并的：

css复制:is(.header, .footer) a:hover {
  color: red;
}

:is()和:where()的区别在于优先级计算：:is()的优先级取参数列表中最高的一项，而:where()优先级恒为零。实际使用中，如果想让一个选择器完全不影响覆盖规则，用:where()包一层会很舒服。

3.4 伪元素：在元素身上开一片额外空间

伪元素和伪类是完全不同的东西。伪类是“元素在某个状态下可以被选中”，而伪元素是“元素本身并不存在，但你可以通过CSS创造出来”。最典型的就是::before和::after。

css复制.card::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #f00, #00f);
}

这就在.card的内容前面加了一条渐变线。::before和::after最常见的用途就是做装饰性内容、小图标、对话框尖角、hover特效等，完全不占用HTML结构。

踩坑提醒：伪元素必须有content属性，哪怕写一个空字符串，否则整个伪元素不会渲染出来。很多人写::before时忘了加content: "";，然后对着页面干瞪眼半天不知道哪出了问题。

伪元素里还有一剂猛药：::selection，用来定义用户选中文本时的样式。比如：

css复制::selection {
  background: #ffe066;
  color: #222;
}

这类细节往往会让前端页面显得更精致。不过需要注意，::selection里可用的属性很有限，主要就是background、color这些与文本相关的属性，别在它里面写什么border或者padding，不会生效的。

4. 优先级与层叠：样式没生效的真正的坑在哪

我敢说，CSS选择器这一块，十个新手九个半都栽在优先级上。你问他们选择器有哪些，他们能背出来：元素、类、ID、属性、伪类、伪元素。但你问为什么一个类选择器的样式老是覆盖不了另一个类选择器，他们就懵了。所以这篇指南必须把优先级单独拎出来讲透。

4.1 选择器权重是怎么算的

CSS里有一套非常明确的权重计算规则，简单说就是：内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素。

用具体的分量来算：

• 内联样式：权重记为(1, 0, 0, 0)
• ID选择器：权重记为(0, 1, 0, 0)
• 类选择器、属性选择器、伪类：权重记为(0, 0, 1, 0)
• 元素选择器、伪元素：权重记为(0, 0, 0, 1)

比较规则是先比第一位，再比第二位，以此类推。举个例子：

css复制#nav .menu li a {
  color: #333;
}

.nav-menu .menu-item a {
  color: #666;
}

第一条的权重是(0, 1, 1, 2)（一个ID、一个类、两个元素），第二条是(0, 0, 2, 1)（两个类、一个元素）。比较第一位都是0，然后比第二位1大于0，所以第一条胜出，即使第二条的类名写得更具体，也无法覆盖第一条。

我见过不少同学想绕过这种问题，靠“多加一个类”来拼权重，.menu-item.active.active这种写法真的不推荐。它只是暂时赢了，却让代码变得非常难维护。正确做法是：尽量压低选择器整体权重，保持选择器层级简单，然后用类选择器来控制覆盖关系。

4.2 相同权重下，谁在后谁赢

如果两个选择器的权重完全一样，那就看它们在样式表中出现的先后顺序，后写的覆盖先写的。这是层叠规则的另一半。

这就解释了为什么有时候你在CSS文件末尾写了一个样式，页面却没有变化，很可能是有另一份同名权重的样式位于你之后，比如某个UI库的样式被引入到了你的样式后面。排查的思路就很直接：打开浏览器开发者工具，找到那个元素，看看样式面板里有哪些规则在竞争，然后按优先级、按顺序一一排除，问题很容易暴露出来。

4.3 !important：双刃剑，用之前问自己三次

!important能直接把一条样式提到最高优先级，压过其他一切常规声明。但滥用它一般都会留下后患：

css复制.button {
  background: red !important;
}

这样写之后，任何地方的样式都很难覆盖这个背景色。下一次产品经理说“这个红色按钮换个主题色”，你就得去找那个!important，或者再叠一个!important来覆盖，样式表很快就变成一团乱麻。

我的建议是：!important只用于两种情况。一是覆盖第三方库的单条样式，而且你确认不会跟后续版本冲突；二是配合JavaScript动态切换状态时，需要确保样式在复杂的优先级环境下不被覆盖。除此之外，能用提高选择器权重解决的，就不要动用它。

4.4 层叠上下文与选择器的关系

有时候你可能发现，两个样式权重一样、顺序也对，但某些属性就是不生效，比如z-index、position，这就要聊到层叠上下文了。层叠上下文跟选择器本身没有那么直接的关系，但它决定了元素之间的堆叠顺序。像transform、opacity这类属性会创建新的层叠上下文，导致子元素在z-index上的表现超出预期。

选择器选中的元素如果被包在一个创建了层叠上下文的容器里，那么它在z-index上的比较范围就局限在这个容器内。这就是为什么你写了z-index: 9999还在某个元素底下。遇到这种问题时，先别怀疑选择器，去检查一下父元素有没有transform或者filter这类属性，往往能更快定位原因。

5. 实战复盘：我是怎么被一个怪异选择器坑掉的

前面讲完基础理论和优先级，这一节来说几个我真实踩过的坑，完整走一遍排查流程，帮你也建立一套自己的排查思路。

5.1 :nth-child引发的“幽灵样式”

有一次我做后台管理系统，右侧菜单的每一项需要隔行换色。我当时很自然地写了一条规则：

css复制.menu-list li:nth-child(2n) {
  background: #f7f8fa;
}

结果页面出来之后，隔行变色完全乱套，有的行变色了，但位置和预期差了一位。我一开始以为是数据渲染问题，去查HTML结构，发现.menu-list下面不仅有li，还在某些位置混入了div节点，是第三方组件动态插入的。

这时候li:nth-child(2n)算的是所有兄弟节点里的偶数位置，而不是所有li里的偶数位置。修正方法是改成：

css复制.menu-list li:nth-of-type(2n) {
  background: #f7f8fa;
}

这一个案例很典型：以后遇到位置错乱的选择器问题，第一反应先去看DOM结构里是不是混入了其他标签，再掂量清楚:nth-child和:nth-of-type的区别。

5.2 一个覆盖不了的按钮颜色

还有一次，同事给我转来一个线上问题：某个表单页面里的提交按钮颜色始终改不掉，内联样式都加了还是不对。我打开开发者工具一查，发现有一条规则来自一个全局样式文件：

css复制.form-actions .btn-primary:not(.btn--disabled) {
  background-color: #1677ff;
}

它的权重比我写的.page-submit.btn-primary高多了。我本来想用!important强压，但想了想，更合理的解法是提高自身选择器的权重，把父级容器加进选择器，比如：

css复制.special-page .form-actions .btn-primary {
  background-color: #ff6a00;
}

虽然多嵌套了一层，读起来没那么舒服，但至少没有引入!important，后面任何地方想覆盖这个颜色，其实只要再加一层类名或者在它后面写同等权重的规则就行。这个案例告诉我：发现样式覆盖不了，第一件事不是加!important，而是看清竞争双方的选择器权重，找一个优雅的方式切入。

5.3 ::before显示不出来，问题出在content

有个需求是给某个状态标签前面加个小圆点，我当时写：

css复制.status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #52c41a;
  margin-right: 4px;
}

然后页面上死活没有圆点。检查了选择器，status类名没错，伪元素支持也没问题。最后发现，我忘了写content: "";。伪元素默认没有内容，编译器也不是报错，纯粹是渲染不出来。加上content: "";那一刻，圆点就出现了。这个坑看起来很低级，但它确实会时不时地冒出来，尤其在你一口气写了很多CSS规则的时候。

5.4 属性选择器里的引号也能搞事情

属性选择器可以写引号，也可以不写引号，比如[type="text"]和[type=text]效果一样。但属性的值如果包含空格或者特殊字符，就必须加引号。我遇到过一次，HTML上是data-name="active item"，CSS里写[data-name=active item]，空格把它拆成了两个条件，样式完全不匹配。这种问题通常隐藏得很深，因为代码里看起来只是少了一对引号。

排查的时候，我建议直接在浏览器开发者工具里输入CSS选择器验证，比如在Console里执行document.querySelectorAll('你的选择器')，看看返回的元素是不是你想要的。这一招能立竿见影地缩小排查范围。

5.5 排查选择器问题的完整思路

把上面这些坑串起来，我现在遇到选择器不生效的排查顺序是这样的：

1. 先用开发者工具选到目标元素，确认选择器是否真的能匹配上。这个步骤最快，直接在Console里querySelectorAll一下就行。
2. 如果匹配上了，看样式面板里有哪些规则命中，重点看权重高低和先后顺序。
3. 如果权重和顺序都没问题，检查是不是有内联样式或JavaScript动态写入的样式在作怪。
4. 如果还不行，检查父元素有没有创建层叠上下文，或者伪元素缺少content这类基础条件。
5. 最后再去检查HTML结构是不是被第三方组件劫持了，比如混入了多余的标签节点。

这套流程走完，不说100%的CSS问题，90%的选择器相关谜案都能破掉。

6. 给小白的选择器使用守则

最后这一部分，把这些年写CSS的实操经验浓缩成几条守则。你不需要背下来，但遇到问题的时候回来看一眼，能少走很多弯路。

6.1 类名命名：有规律才能不慌

CSS类名的命名，我一直强调要有规律。这边推荐了解一下BEM的简化版思路：.block代表组件，.block__element代表组件内的元素，.block--modifier代表状态或变体。比如一个登录表单：

css复制.login-form {}
.login-form__title {}
.login-form__button {}
.login-form__button--disabled {}

这样命名的好处是，你看到HTML就知道哪个类属于哪个组件，看到CSS也能快速定位作用范围，协同开发的时候尤其重要。类名尽量用英文小写加连字符，不要用中文拼音，更不要用class="div1"这种随意的命名。

6.2 层级选择器保持浅平

嵌套层级越深，选择器权重越高，性能也会受到一定影响。而且深层次选择器会让样式跟HTML结构强耦合，一旦结构变了，样式就跟着失效。我见过有人写出#page .content .main .list .item a这种选择器，看着就头疼。如果你发现选择器已经超过三层，停下来想想有没有办法精简，或者给目标元素单独加一个类名。适度使用类名的代价，远低于维护复杂选择器链的代价。

6.3 不要动辄用通配符和ID样式

通配符和ID选择器前面都聊过了：通配符影响面大，ID优先级高且难以覆盖。日常开发中能用类选择器解决的就优先用类选择器，这个习惯会显著降低你的样式冲突概率。只有在极少数需要全局基线样式的场景下，才用通配符和元素选择器去做设置。

6.4 利用浏览器开发者工具做验证

开发者工具是排查选择器问题最好的老师。要验证某个元素是否被选择器命中，就在Console里输入document.querySelectorAll('你的选择器')，然后回车看看结果。要检查应用的样式优先级，就在Elements面板里选“Styles”标签，右侧会列出所有匹配的规则，还会自动带上优先级排序，鼠标放上去会显示具体的权重值。很多时候不是你不会写选择器，而是没把开发者工具的调试手段用起来。

6.5 接口式写法：状态和样式分离

最后一个建议：把“样式类”和“状态类”分开。样式类管长什么样，状态类管是什么状态。比如：

html复制<button class="btn btn--primary state--disabled">提交</button>

然后CSS这样写：

css复制.btn--primary {
  background: #1677ff;
}
.state--disabled {
  opacity: 0.5;
  pointer-events: none;
}

这样做的好处是，状态变化时只需要通过JavaScript增删.state--disabled这个类，样式类完全不用动，代码逻辑清晰，覆盖关系也一目了然。这套做法在很多团队的组件库里都大同小异地存在，本质就是让CSS选择器保持稳定，把变化的东西隔离在状态类里。

顺着这个思路，你其实也可以自己设计一套适合你项目状态流的选择器规范。关键是掌握底层的优先级逻辑和结构关系，各种框架和设计系统再怎么封装，最终落到浏览器里都还是这一套规则在运转。把基础的选择器、组合关系、优先级和验收方法搞定，以后不管看到什么样的CSS代码，你都能很快看明白它想干什么。所以说，小白前端真别慌，选择器没那么吓人，它就是一层窗户纸，捅破之后就一通百通了。