元素或其父项中没有类的选择器答案

【问题标题】：selector for absence of class in element or its parents元素或其父项中没有类的选择器
【发布时间】：2020-10-24 17:15:59
【问题描述】：

我正在尝试更改 MediaWiki 访问链接的可怕默认颜色，并为新链接保留红色。新链接具有类 new 或其父级具有此类集。所以我尝试了

:not(.new) a:not(.new) { color: #0074D9 !important; }

但正如我在浏览器控制台中检查的那样，此规则会覆盖 li.new a - 它不应该这样做。试了一下，

li:not(.new) a:not(.new) 为 li.new a 保留红色，
*:not(.new) a:not(.new) 覆盖红色

您能否解释一下这种行为并推荐一个 CSS 规则，强制所有链接都使用蓝色，但新链接除外？

【问题讨论】：

您可能对ongoing discussion 对更改颜色感兴趣。

标签： css mediawiki

【解决方案1】：

:not(.new) 将匹配每个元素，它没有new 类。例如，<li class="new"><span><a>...</a></span></li> 中的 :not(.new) a 将匹配 span a。一般来说，:not() 在没有您知道不会在其他地方使用的特定类或 id 的情况下使用是相当危险的。

你想要的是“a标签没有.new祖先”（与“a标签没有.new祖先”相反），它不能表示为CSS选择器。鉴于您知道 .new 元素是祖父元素，您也许可以改写 :not(.new) > * > a 之类的东西。

【讨论】：

感谢您解释<span> 角色和讨论链接。我最终选择了a { color: #0074D9 !important; } a.new, .new a { color: #ba0000 !important; } 作为核选项，MediaWiki 今天有一些问题要解决。

【解决方案2】：

为li.new a 和li a.new 设置颜色，然后为li:not(.new) a 和li a:not(.new) 设置颜色。

如果您只希望访问的链接改变颜色，请将 :visited 添加到 css 选择器

ul li.new a, ul li a.new {
color:red
}
li:not(.new) a {
color:green
}
a:not(.new) {
color:green
}

<ul>
  <li>
      <a href="#" >Normal Link</a>
  </li>
  <li class='new'>
     <a href="#">this will NOT be  green because LI has class new </a>
  </li>
  <li>
      <a href="#" class='new'>this will NOT be green because it has class new</a>
  </li>
   <li>
      <a href="#" >Normal Link</a>
  </li>
</ul>

【讨论】：