如何用单个CSS选择器选中.row后代的.p类元素并排除含.disable祖先的元素

嘿，这个需求其实用单个CSS选择器就能完美解决，我们可以借助CSS Selectors Level 4中增强的:not()伪类来实现，刚好匹配你要的效果：

.row .p:not(.disable .row .p) {
  border: 3px solid blue;
}

选择器解释 #

• .row .p：基础选择器，匹配所有属于.row后代的.p元素（不管层级深度）
• :not(.disable .row .p)：排除掉所有被.disable元素包含的.row .p元素——这里的.disable和.row之间可以是任意层级的元素，完全符合你说的“祖先链中存在.disable就不设置蓝色边框”的要求

这样一来，只要.p的祖先链里有任何一个.disable类的元素，它就会被排除在选择范围之外，自然不会有蓝色边框；而其他符合条件的.row .p元素会正常应用蓝色边框，完全不需要用第二个选择器来覆盖样式。

兼容性说明 #

这个方案依赖于CSS Selectors Level 4中允许:not()伪类接收复杂组合选择器的特性，目前现代主流浏览器（Chrome 88+、Firefox 103+、Safari 14.1+）都已经支持。如果需要兼容更老的浏览器，那可能还是得保留你原来的两个选择器覆盖的方案，但在现代前端环境中，这个单个选择器的方案是最优解。

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