元素或其父元素中缺少 class 的选择器

Question

我正在尝试更改 MediaWiki 已访问链接的丑陋默认颜色，并为新链接保留红色。新链接有 class new 或其父链接有此 class 集。所以我尝试了

: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 规则，强制所有链接（新链接除外）都显示为蓝色？

Answer 1

为 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>

Answer 2

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

您想要的是“没有 .new 祖先的 a 标签”（相对于“具有非 .new 祖先的 a 标签” ")，不能表示为 CSS 选择器。如果您知道 .new 元素是祖父母元素，您也许可以编写类似 :not(.new) > * > a 的内容。

元素或其父元素中缺少 class 的选择器

selector for absence of class in element or its parents

css

mediawiki