如何使用CSS选择器选中无指定父元素的子元素并应用样式

解决方案 #

方案1：全浏览器兼容写法（推荐） #

这是适用性最广的实现方式，不需要依赖新CSS特性，所有主流浏览器都支持：

1. 先给所有按钮添加你需要的目标样式
2. 再单独把#someId下的所有按钮样式覆盖为默认值即可，嵌套层级不限

/* 给所有按钮应用目标样式 */
button {
  /* 示例样式，替换为你的实际样式即可 */
  background: #1677ff;
  color: #fff;
  border-radius: 4px;
  border: none;
  padding: 6px 16px;
}

/* 覆盖父级链包含#someId的按钮样式 */
#someId button {
  /* 恢复为默认样式即可 */
  background: #f5f5f5;
  color: #333;
}

方案2：现代CSS精准匹配写法 #

如果你的项目不需要兼容Chrome 105、Firefox 121、Safari 15.4以下的浏览器版本，可以用:has()伪类直接匹配目标元素，无需额外写覆盖规则：

/* 精准匹配所有祖先元素中不存在id为someId的按钮 */
button:not(:has(#someId :is(&))) {
  background: #1677ff;
  color: #fff;
  border-radius: 4px;
  border: none;
  padding: 6px 16px;
}

注意避坑 #

不要尝试写button:not(#someId button)这类规则，目前CSS规范中:not()伪类不支持传入后代选择器作为参数，这类写法不会生效。

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