CSS选择器如何基于最近的带有指定类的祖先匹配目标元素？

以下两种方案均可解决嵌套场景下的样式冲突问题，优先推荐第一种实现：

方案1：使用CSS自定义属性（变量）（推荐） #

利用CSS变量的继承特性，嵌套时内层定义的变量会自动覆盖外层值，天然匹配「取最近祖先类样式」的需求，无需处理选择器优先级问题。

1. 改造原有背景类，新增前景色变量定义：

.bg-light, .surface-light {
  --foreground-color: #000;
  /* 保留原有背景配置，例如：background: white; */
}
.bg-dark, .surface-dark {
  --foreground-color: #fff;
  /* 保留原有背景配置，例如：background: black; */
}

2. 为需要适配的元素直接绑定变量：

input, button, p, [class*="border"] /* 按需补充所有要适配的元素 */ {
  color: var(--foreground-color);
  /* 如果需要适配边框颜色可加：border-color: var(--foreground-color); */
}

这种写法下，不管嵌套多少层深浅色类，元素都会自动读取最近的祖先类定义的--foreground-color值，完全解决嵌套冲突问题。

方案2：使用:has()选择器（兼容现代浏览器） #

如果不想改动原有类的定义，可通过:has()选择器排除包含子级深浅类的祖先节点，仅匹配最近的祖先：

/* 仅匹配不包含子级深浅类的.light系祖先下的元素 */
.bg-light:not(:has(.bg-light, .surface-light, .bg-dark, .surface-dark)) input,
.surface-light:not(:has(.bg-light, .surface-light, .bg-dark, .surface-dark)) input {
  color: black;
}
/* 仅匹配不包含子级深浅类的.dark系祖先下的元素 */
.bg-dark:not(:has(.bg-light, .surface-light, .bg-dark, .surface-dark)) input,
.surface-dark:not(:has(.bg-light, .surface-light, .bg-dark, .surface-dark)) input {
  color: white;
}

该方案2024年主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）均支持，无需修改原有类逻辑，但如果需要兼容极低版本浏览器则不适用。

内容的提问来源于stack exchange，提问作者Murillo Tavares