你不知道的CSS选择器：从Level3到Level4，解锁高效样式编写黑科技

北冥有鱼其名为坤
80 阅读11分钟

一、前言：别再只会用类选择器了！

作为前端开发者，CSS选择器是我们每天都在用的基础工具。但大多数人可能停留在「类选择器（.class）+ ID选择器（#id）+ 标签选择器」的老三样，最多偶尔用下后代选择器，完全浪费了CSS选择器的强大潜力。

其实CSS从2.1到CSS3（Selectors Level3），再到最新的CSS Selectors Level4，已经迭代出了超多实用特性。这些选择器能帮你少写N行冗余代码，不用依赖JS就能实现复杂样式逻辑，还能让代码更语义化、更易维护。

今天就带大家全面盘点「从Level3到Level4的进阶选择器」，从基础用法到实战黑科技，全程带代码示例和场景解析，看完直接抄进项目！

二、CSS Selectors Level3：夯实基础，效率翻倍

Level3选择器在浏览器兼容性上表现优异（大部分兼容到IE9+），是日常开发的「主力工具」，重点掌握这几组，能显著提升开发效率。

（一）结构伪类选择器：按DOM位置精准定位

Level3完善了结构伪类体系，不用依赖class，直接通过元素在文档树中的位置选择，让布局样式更干净。

1. 核心用法与场景

/* 1. 匹配第一个子元素（同层级第一个）*/
ul > li:first-child {
  border-top: 1px solid #eee; /* 列表顶部边框统一 */
}

/* 2. 匹配最后一个子元素 */
ul > li:last-child {
  border-bottom: none; /* 去掉最后一个元素的底边框，避免重复 */
}

/* 3. 匹配唯一子元素（父元素只有它一个子元素）*/
.container div:only-child {
  margin: 0 auto; /* 唯一子元素水平居中 */
}

/* 4. 匹配第n个子元素（支持公式计算）*/
/* 选中第3个元素 */
.item:nth-child(3) {
  font-weight: bold;
}

/* 奇数项（1、3、5...）- 隔行变色常用 */
.item:nth-child(odd) {
  background: #f8f9fa;
}

/* 偶数项（2、4、6...）*/
.item:nth-child(even) {
  background: #fff;
}

/* 前3个元素（n从0开始计算，-n+3即0+3=3、-1+3=2、-2+3=1）*/
.item:nth-child(-n+3) {
  margin-top: 0; /* 去掉前3个元素的上边距 */
}

/* 从第4个元素开始（n+4即0+4=4、1+4=5...）*/
.item:nth-child(n+4) {
  opacity: 0.8;
}

/* 5. 按类型匹配第n个元素（忽略其他类型元素）*/
/* 匹配同类型中的第2个li（即使中间有div等其他元素也不影响）*/
li:nth-of-type(2) {
  color: #007bff;
}

/* 匹配同类型中的最后一个li */
li:last-of-type {
  border-radius: 0 0 8px 8px;
}

/* 6. 匹配空元素（无内容、无子节点）*/
div:empty {
  display: none; /* 隐藏空div，避免布局错乱 */
}

2. 实战场景：表格布局优化

不用给表格行加额外class，直接用Level3选择器实现复杂样式：

table {
  width: 100%;
  border-collapse: collapse;
}

/* 表头样式 */
th {
  background: #007bff;
  color: white;
  padding: 12px;
}

/* 表格行隔行变色 */
tr:nth-child(even) {
  background: #f8f9fa;
}

/* 最后一行加特殊边框 */
tr:last-child td {
  border-bottom: 2px solid #007bff;
}

/* 每行第一个单元格加粗 */
td:first-child {
  font-weight: bold;
  padding-left: 16px;
}

（二）属性选择器增强：精准匹配属性值

Level3扩展了属性选择器的匹配规则，支持子串匹配，灵活度大幅提升。

1. 完整匹配规则

/* 1. 基础：匹配包含某个属性的元素 */
a[target] {
  color: #ff6b6b; /* 所有带target属性的链接变红 */
}

/* 2. 精确匹配：属性值完全相等 */
input[type="text"] {
  border: 1px solid #ddd; /* 仅type="text"的输入框生效 */
}

/* 3. 前缀匹配：属性值以指定字符串开头 */
a[href^="https"] {
  background: url("https-icon.png") no-repeat right center;
  padding-right: 20px; /* HTTPS链接加安全图标 */
}

/* 4. 后缀匹配：属性值以指定字符串结尾 */
img[src$=".png"], img[src$=".jpg"] {
  border-radius: 8px; /* 图片格式统一加圆角 */
}

/* 5. 包含匹配：属性值包含指定字符串 */
div[class*="card-"] {
  padding: 16px; /* 所有class含"card-"的元素统一内边距 */
}

/* 6. 空格分隔匹配：属性值是空格分隔的列表，且包含指定值 */
div[class~="active"] {
  border: 2px solid #007bff; /* 仅当class中单独存在"active"时生效 */
}

/* 7. 连字符匹配：属性值以指定值开头，后跟连字符（如lang="zh-CN"）*/
p[lang|="zh"] {
  font-family: "Microsoft YaHei", sans-serif; /* 中文语言文本统一字体 */
}

2. 实战场景：表单样式统一

不用给每个表单元素加class，直接通过属性选择器批量控制：

/* 禁用状态按钮 */
button[disabled], input[disabled] {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.7;
  border: none;
}

/* 必填项标红提示 */
input[required], textarea[required] {
  border-left: 3px solid #e53e3e;
}

/* 带占位符的输入框 */
input[placeholder], textarea[placeholder] {
  font-size: 14px;
  color: #999;
}

/* 邮箱类型输入框 */
input[type="email"] {
  background: url("email-icon.png") no-repeat 12px center;
  padding-left: 40px;
}

（三）状态伪类扩展：响应交互与文档状态

Level3新增了多个实用状态伪类，能更精细地响应元素交互和文档状态。

1. 核心状态匹配

/* 1. 链接未访问状态 */
a:link {
  color: #007bff;
}

/* 2. 链接已访问状态 */
a:visited {
  color: #6c757d;
}

/* 3. 鼠标悬停状态 */
.btn:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* 4. 元素激活状态（点击时）*/
.btn:active {
  transform: scale(0.98);
}

/* 5. 输入框聚焦状态 */
.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* 6. 元素处于启用状态 */
input:enabled {
  cursor: text;
}

/* 7. 复选框/单选框选中状态 */
input[type="checkbox"]:checked {
  accent-color: #007bff;
}

/* 8. 元素处于只读状态 */
input:read-only {
  background: #f5f5f5;
}

/* 9. 元素处于可选状态（如下拉框选项）*/
option:optional {
  color: #999;
}

/* 10. 目标元素（URL锚点指向的元素）*/
.section:target {
  scroll-margin-top: 80px; /* 锚点跳转时预留导航栏高度 */
  border-left: 4px solid #007bff;
  padding-left: 12px;
}

三、CSS Selectors Level4：前沿特性，解锁高级玩法

Level4选择器是CSS选择器的「进阶黑科技」，虽然部分特性需要兼容处理，但实用性极强，能实现很多之前需要JS才能完成的功能。

（一）组合选择器增强：更灵活的元素关联匹配

Level4扩展了组合选择器的能力，支持更复杂的元素关联逻辑。

1. 相邻兄弟选择器扩展（~）

/* 传统相邻兄弟选择器（仅匹配紧接在后面的兄弟元素）*/
h2 + p {
  margin-top: 8px;
}

/* Level4：匹配后面所有同层级的兄弟元素（无需紧相邻）*/
h2 ~ p {
  color: #333;
  line-height: 1.6; /* 所有在h2后面的p元素统一样式 */
}

2. 列组合选择器（||）

专门用于表格或网格布局，匹配指定列中的元素：

/* 匹配表格中第2列的所有单元格 */
table || td:nth-child(2) {
  background: #f8f9fa;
  font-weight: bold;
}

/* 匹配网格布局中"price"列的元素 */
.grid || .price {
  color: #e53e3e;
}

（二）伪类选择器重磅升级：父元素选择+精准过滤

Level4最核心的升级是新增了「父元素选择器」和更精细的过滤伪类，彻底打破了CSS「只能从父到子」的选择限制。

1. :has() 父元素选择器（革命性特性）

终于能通过子元素反向选择父元素了！之前需要JS实现的功能，现在CSS就能搞定：

/* 1. 包含.active类的导航栏（父元素选择）*/
.nav:has(.active) {
  background: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 2. 输入框有内容时，标签上浮 */
.form-group:has(input:not(:placeholder-shown)) label {
  transform: translateY(-12px);
  font-size: 12px;
  color: #007bff;
}

/* 3. 复选框选中时，卡片样式变化 */
.card:has(input[type="checkbox"]:checked) {
  border-color: #007bff;
  background: rgba(0, 123, 255, 0.05);
}

/* 4. 有子元素img的a标签加边框 */
a:has(img) {
  display: inline-block;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 5. 后代元素聚焦时，父容器高亮 */
.modal:has(.input:focus) {
  border-color: #007bff;
}

2. :is() 选择器：简化多重选择器

合并多个重复的选择器，减少代码冗余，提高可读性。需注意旧版浏览器可能以:match()或-webkit-any()形式支持：

/* 传统写法：重复写多个父选择器 */
.header h1, .header h2, .header h3, .footer h1, .footer h2 {
  color: #333;
  margin-bottom: 16px;
}

/* Level4 :is() 简化写法 */
:is(.header, .footer) :is(h1, h2, h3) {
  color: #333;
  margin-bottom: 16px;
}

/* 再举个例子：多个选择器共享样式 */
.btn-primary:hover, .btn-success:hover, .btn-danger:hover {
  transform: scale(1.05);
}

/* 简化为 */
:is(.btn-primary, .btn-success, .btn-danger):hover {
  transform: scale(1.05);
}

3. :where() 选择器：无优先级的选择器

用法和:is()完全一致，但优先级为0，不会影响样式权重，适合用于基础样式库：

/* :where() 优先级为0，即使写在后面也不会覆盖前面的样式 */
:where(.header, .footer) h1 {
  color: #666;
}

/* 传统选择器优先级更高，会覆盖上面的样式 */
.header h1 {
  color: #333; /* 最终生效 */
}

/* 实用场景：基础样式库 */
:where(ul, ol) {
  margin: 0;
  padding-left: 24px;
}

/* 用户可以轻松覆盖基础样式，无需提高权重 */
ul {
  padding-left: 32px; /* 生效 */
}

4. 精准过滤伪类

/* 1. :blank 匹配空值输入框（比:empty更精准，支持输入框）*/
input:blank {
  border-color: #ddd;
}

input:not(:blank) {
  border-color: #007bff;
}

/* 2. :dir() 匹配指定文本方向的元素 */
p:dir(ltr) {
  text-align: left;
}

p:dir(rtl) {
  text-align: right;
}

/* 3. :lang() 增强版：支持语言子集匹配 */
/* 匹配所有中文（包括zh-CN、zh-TW等）*/
div:lang(zh) {
  font-family: "Microsoft YaHei", sans-serif;
}

/* 4. :nth-child() 扩展：支持of语法，精准过滤类型 */
/* 匹配div父元素下的前2个li（忽略其他类型子元素）*/
div li:nth-child(2 of li) {
  color: #ff6b6b;
}

/* 5. :only-of-type 匹配同类型中的唯一子元素 */
/* 父元素中只有一个img时生效 */
img:only-of-type {
  max-width: 100%;
  border-radius: 8px;
}

/* 6. :placeholder-shown 匹配占位符显示中的输入框 */
input:placeholder-shown {
  background: #f9f9f9;
}

（三）文本与UI状态伪类

/* 1. ::selection 选中文本样式（Level4扩展支持更多属性）*/
::selection {
  background: #ffd700;
  color: #333;
  text-shadow: none;
}

/* 2. :in-range 匹配输入值在指定范围内的输入框 */
input[type="number"]:in-range {
  border-color: #28a745;
}

/* 3. :out-of-range 匹配输入值超出范围的输入框 */
input[type="number"]:out-of-range {
  border-color: #e53e3e;
}

/* 4. :invalid 匹配无效值的输入框（如邮箱格式错误）*/
input:invalid {
  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.25);
}

/* 5. :valid 匹配有效值的输入框 */
input:valid {
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}

/* 6. :required 匹配必填项 */
input:required {
  background: url("required-icon.png") no-repeat right center;
  padding-right: 20px;
}

/* 7. :optional 匹配可选项 */
input:optional {
  background: transparent;
}

四、避坑指南：选择器使用最佳实践

（一）性能优化：避免选择器低效写法

1. 避免嵌套过深：CSS选择器从右往左解析，嵌套越深，性能越差（建议最多2-3层）

/* 不推荐：嵌套4层，性能差 */
.header .nav .nav-item .link {
  color: #333;
}

/* 推荐：减少嵌套 */
.nav-item .link {
  color: #333;
}

2. 避免通配符滥用：* 会匹配所有元素，性能消耗大，尽量精准匹配

/* 不推荐 */
* {
  margin: 0;
  padding: 0;
}

/* 推荐：精准匹配需要重置的元素 */
body, div, p, ul, ol, li, h1, h2, h3 {
  margin: 0;
  padding: 0;
}

3. 优先使用类选择器：ID选择器权重过高，属性选择器性能略低于类选择器，日常开发优先用类选择器，特殊场景用进阶选择器

（二）兼容性处理：兼顾旧浏览器

选择器特性

兼容情况

兼容方案

Level3 基础特性（:nth-child、[attr^=]等）

IE9+、所有现代浏览器

直接使用，无需兼容

Level3 :checked、:focus等状态伪类

IE9+、现代浏览器

直接使用

Level4 :is()、:where()

Chrome 88+、Firefox 78+、Safari 14.1+（旧版以:match()/-webkit-any()支持）

用PostCSS插件转译，或提供降级样式

Level4 :has()

Chrome 105+、Firefox 121+、Safari 15.4+

关键场景用JS降级，非关键场景用@supports检测

兼容性检测示例（@supports）

/* 检测浏览器是否支持:has() */
@supports selector(:has(*)) {
  .card:has(.checked) {
    border-color: #007bff;
  }
}

/* 不支持的浏览器降级样式 */
@supports not selector(:has(*)) {
  .card.checked {
    border-color: #007bff;
  }
}

/* 检测是否支持:is() */
@supports selector(:is(*)) {
  :is(.header, .footer) h1 {
    color: #333;
  }
}

/* 降级样式 */
.header h1, .footer h1 {
  color: #333;
}

（三）权重控制：避免权重爆炸

1. 权重优先级：ID选择器（100）> 类/属性/伪类选择器（10）> 标签选择器（1）> 通配符（0）

2. :is() 和 :where() 的权重：:is() 取参数中最高权重，:where() 权重为0

3. 避免使用 !important：优先通过选择器结构控制权重，!important 会导致样式难以维护

五、总结：选择器的核心是「精准」与「简洁」

CSS选择器的迭代趋势是「更精准、更灵活、更少冗余」。Level3选择器是日常开发的基础，能帮你高效完成大部分布局和样式需求；Level4选择器则是进阶利器，让CSS具备了更强的逻辑处理能力，减少对JS的依赖。

不用死记硬背所有选择器，重点是理解「什么时候用什么选择器」：

  • 布局时：用Level3的结构伪类（:nth-child、:first-child等）减少冗余class

  • 表单时：用Level3的状态伪类（:checked、:focus、:valid等）实现交互反馈

  • 复杂逻辑时：用Level4的:has()、:is()、:where()简化代码，实现高级效果

建议大家在项目中多尝试这些选择器，慢慢形成「用选择器解决问题」的思维，你会发现写CSS效率翻倍，代码也更干净、更易维护！

如果还有其他好用的选择器黑科技，欢迎在评论区分享。文章有误之处请指正，避免误导。

avatar
文章
阅读
粉丝