CSS中能否仅匹配所有子元素符合条件的元素？或简化重复选择器？

可以借助:has选择器结合否定逻辑实现，完全不需要重复编写子元素选择器，以下是具体方法：

核心思路：反向判断 #

要实现“所有子元素都匹配指定条件”，可以反向判断父元素中不存在不满足条件的子元素——用:has(:not(满足条件的选择器))选中存在不符合条件子元素的父容器，再通过:not()取反，就能得到所有子元素都符合条件的父容器。

示例：所有子复选框选中时的父容器样式 #

假设你有一个包含多个复选框的容器，要在所有复选框都选中时给容器加样式，代码如下：

/* 当容器中存在未选中的复选框时，可定义未全选样式（可选） */
.checkbox-group:has(input[type="checkbox"]:not(:checked)) {
  border: 1px solid #ccc;
}

/* 当容器中没有未选中的复选框（即全部选中）时，应用目标样式 */
.checkbox-group:not(:has(input[type="checkbox"]:not(:checked))) {
  border: 2px solid #2ecc71;
  background-color: rgba(46, 204, 113, 0.1);
}

简化复杂选择器 #

如果子元素的选择规则比较复杂，可以用:is来统一聚合选择器，避免重复书写：

/* 当容器内所有.item类元素或复选框都处于选中/激活状态时 */
.container:not(:has(:is(.item, input[type="checkbox"]):not(:checked):not(.active))) {
  /* 目标样式 */
}

兼容性说明 #

:has选择器目前已在Chrome、Firefox 121+、Safari等现代浏览器中支持，若你的项目目标浏览器覆盖这些范围，该方案完全可行。

内容的提问来源于stack exchange，提问作者Ricardo Silva