CSS :not() 选择器失效求助：无法排除.sponsors类内图片

嘿，我来帮你搞定这个问题！你遇到的问题其实是对:not()选择器的用法理解有点偏差——你写的img:not(.sponsors)是在选择自身没有.sponsors类的img元素，但你的.sponsors类是加在父级的table上的，所有img本身都没有这个类，所以样式自然会应用到所有图片上啦。

下面给你两种靠谱的解决方案，你可以根据需求选：

方案一：先全局设置，再覆盖目标容器内的样式（兼容性最好） #

这种方法是最稳妥的，不管什么浏览器都能支持：

/* 先给所有img应用你想要的样式 */
img {
  width: initial;
  max-width: 100%;
  height: auto;
}

/* 然后重置.sponsors表格内的img样式，恢复你需要的效果 */
.sponsors img {
  /* 这里写表格内图片的样式，比如如果想让它们保持原有宽度，就写： */
  width: auto;
  max-width: none;
  height: auto; /* 如果不需要修改可以省略 */
}

方案二：使用:has()父选择器（现代浏览器支持） #

如果你只需要兼容现代浏览器（Chrome、Firefox 121+、Safari 15.4+），可以用:has()选择器直接排除有.sponsors祖先的img：

img:not(:has(ancestor .sponsors)) {
  width: initial;
  max-width: 100%;
  height: auto;
}

这个选择器的意思是：选择所有没有.sponsors类祖先元素的img，完美匹配你的需求。

为什么原来的写法不行？ #

再强调一下：CSS的:not()选择器在标准里，旧版本只能接受「简单选择器」（比如元素、类、ID选择器），不能直接写后代选择器（比如.sponsors img）。所以你原来的写法相当于在说“选择所有自身不是.sponsors类的img”，而你的img都符合这个条件，所以样式就全局生效了。

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