CSS :not()选择器使用异常：无法按预期排除指定类应用样式

你的选择器写法和预期匹配逻辑不符，属于用法错误。

你写的.test .btn div:not(.classtoavoid)的实际匹配规则是：

• 祖先元素带有.test类
• 该祖先下的子元素带有.btn类
• 该.btn元素的后代div元素自身没有.classtoavoid类
  也就是说你当前的规则是给.btn下层的特定div加样式，不是给.btn本身加样式。

场景1：要给自身没有.classtoavoid类的.btn元素加样式 #

把选择器修改为：

.test .btn:not(.classtoavoid) {
  /* 你的样式代码 */
}

场景2：要给后代里不存在带.classtoavoid类的div的.btn元素加样式 #

原生CSS目前不支持通过后代元素的状态反向匹配父元素，你可以用两种方案实现需求：

• 先给所有.test .btn加目标样式，再单独给包含.classtoavoid后代的.btn写样式覆盖原有规则
• 直接给符合要求的.btn额外加一个专用类来绑定样式，兼容性最好，排查问题也更简单

额外注意事项 #

如果你在:not()里传入了多个选择器（比如.a, .b或者.a.b），在不支持CSS3:not()特性的低版本浏览器里会直接失效，CSS2标准下:not()仅支持传入单个简单选择器（单个类、单个标签、单个ID均可）。

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