前端开发中的 CSS :has() 选择器

CSS :has() 是一个非常实用的现代选择器，可以根据子元素或后代元素的状态，反向匹配父元素，让 CSS 具备类似条件判断的能力。

1. 根据子元素控制父元素样式

以前想根据子元素是否存在来修改父元素样式，通常需要借助 JavaScript。

现在可以直接使用 :has()：

.card:has(img) {
  padding: 0;
}

.card:has(.error) {
  border: 1px solid red;
}

2. 根据表单状态设置样式

:has() 在表单场景中特别实用：

.form-item:has(input:focus) {
  border-color: #409eff;
}

.form-item:has(input:invalid) {
  background: #fff2f0;
}

.form-item:has(input:checked) {
  color: #1677ff;
}

不需要额外监听事件，就能根据输入框的状态调整容器样式。

3. 实现交互式布局

例如，当列表中存在选中项时，显示批量操作工具栏：

.toolbar {
  display: none;
}

.container:has(.item.selected) .toolbar {
  display: flex;
}

只要有一个 .item.selected，工具栏就会自动显示。

4. 使用注意事项

• :has() 已被现代主流浏览器支持，但仍需考虑项目的浏览器兼容要求。
• 避免编写过于复杂的嵌套条件，影响代码可读性。
• 不建议用它替代复杂的 JavaScript 业务逻辑。

总结

:has() 让 CSS 从单纯的样式描述逐渐具备了条件匹配能力。

对于 Vue、React 等前端项目，它可以减少一些不必要的状态传递和 DOM 操作，让组件样式更加简洁。

能用 CSS 解决的问题，就不一定需要 JavaScript。