CSS嵌套场景下:not()伪类选择器未按预期生效问题求解

你写的.red :not(.blue) a实际匹配逻辑和你想的完全不一样：

• 这条规则会选中.red容器下，只要有任意一层祖先元素不带.blue类的所有a标签
• .blue里面的nav、普通div本身都没加.blue类，刚好满足:not(.blue)的匹配条件，所以这些标签里的a都会被这条规则命中
• 算权重的话，.red :not(.blue) a是2个类选择器加1个标签选择器，比.blue a的1个类加1个标签优先级更高，自然会把蓝色样式盖掉。只有直接放在.blue下的a，中间没有其他不带.blue的祖先节点，才不会被这条红规则选中，所以只有2个直接子链接是蓝色。

你之前试的两个方案没用的原因很简单：

• 给:not()里的选择器加双引号是完全不符合CSS语法的错误写法，浏览器根本不认
• 在:not()前面加*通配符纯粹是多此一举，后代选择器本来就会默认匹配中间所有层级的元素，加*不会改变原来的匹配逻辑，当然解决不了问题。

不用改HTML结构、不用挪.red类的位置，完全靠:not()就能实现需求，写法如下，兼容所有你要求的主流现代浏览器：

a { color: green }
.blue a { color: blue }
.red a:not(.blue *) { color: red }

逻辑说明 #

这是CSS Selectors Level 4规范里的标准写法，现在所有主流新版本浏览器都支持，:not()里可以直接传后代选择器，匹配逻辑非常清晰：

1. 先选中.red容器里的所有a标签
2. 把所有属于.blue容器后代的a标签从选中结果里排除
3. 剩下的a标签统一设为红色
   这个写法从根上避开了之前“中间嵌套的不带.blue的元素被误匹配”的问题，最终效果刚好是对照组6个链接绿色、.blue容器内6个链接蓝色、.red下非.blue区域6个链接红色，完全符合你的预期。
   你提到的用>直接子元素结合符的方案只能部分生效，本质是把匹配范围卡死在.red的直接子节点层，要是.red下面有多层嵌套的非.blue结构就匹配不到了，通用性不如上面的写法。

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