如何选择所有.ps-label元素，排除含匹配ID模式祖先的元素？

没问题，我来帮你搞定这个样式选择的需求！要实现“选中所有.ps-label，但排除那些被特定模式ID的div包含的元素”，可以通过CSS的属性选择器+:not()+:is()伪类组合来完成，具体方案如下：

核心CSS选择器代码 #

/* 为所有符合条件的.ps-label应用样式 */
.ps-label:not(:is([id^="win"][id$="divG3FORM_WRK_G3FORM_ID"], [id^="win"][id$="divG3FORM_WRK_G3FORM_IDlbl"]) .ps-label) {
  /* 在这里写入你的样式规则，比如： */
  color: #333;
  font-weight: 500;
}

代码解释 #

让我拆解一下每个部分的作用：

• [id^="win"]：匹配所有ID以win开头的元素，完美适配你说的ID中数字可变的情况（比如win5、win123这类前缀）
• [id$="divG3FORM_WRK_G3FORM_ID"]：匹配所有ID以divG3FORM_WRK_G3FORM_ID结尾的元素
• [id$="divG3FORM_WRK_G3FORM_IDlbl"]：匹配所有ID以divG3FORM_WRK_G3FORM_IDlbl结尾的元素
• :is()：把上面两个ID模式的选择器合并，简化代码结构，避免重复书写
• :not()：排除被上述任意一个div包含的.ps-label元素——不管这个.ps-label是div的直接子元素，还是深层嵌套的后代，都会被排除

兼容性说明 #

这个方案依赖:is()和复杂的:not()选择器，支持所有现代浏览器（Chrome 88+、Firefox 78+、Safari 14+）。如果你的项目需要兼容更老的浏览器，可以把:is()拆分成两个独立的选择器，写法如下：

.ps-label:not([id^="win"][id$="divG3FORM_WRK_G3FORM_ID"] .ps-label):not([id^="win"][id$="divG3FORM_WRK_G3FORM_IDlbl"] .ps-label) {
  /* 你的样式 */
}

示例验证 #

假设你的HTML结构是这样的：

<!-- 这个标签会被选中并应用样式 -->
<div>
  <span class="ps-label">普通标签</span>
</div>

<!-- 这个标签会被排除 -->
<div id="win5divG3FORM_WRK_G3FORM_ID">
  <span class="ps-label">需要排除的标签</span>
</div>

<!-- 深层嵌套的标签也会被排除 -->
<div id="win10divG3FORM_WRK_G3FORM_IDlbl">
  <div class="some-wrapper">
    <span class="ps-label">深层嵌套的排除标签</span>
  </div>
</div>

使用上面的CSS后，只有第一个.ps-label会应用你设置的样式，后两个都会被排除。

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