css - 在 CSS 中， anchor 标记上的伪元素 'not' 不起作用

Question

在 CSS 中，我尝试在 hover 和 active 的 anchor 标记上应用没有伪元素，但它不起作用。

a:not(a[name="nobgcolor"]):hover{color:#ffff35;background-color:#ff3355;}
a:not(a[name="nobgcolor"]):active{color:#ffff35;background-color:red;}

我在悬停和事件超链接中应用了背景色。但我希望不出现背景颜色，其中属性以 name="nobgcolor"的形式存在。在早些时候，我想在具有顶部的 href 上应用相同的内容。 (转到顶部)但没有用，所以我把 name= "nobgcolor"放在同一个地方，然后尝试同样的方法!!!

a:hover:not(a[href*="#top"]){color:#ffff35;background-color:#ff3355;}
a:active:not(a[href*="#top"]){color:#ffff35;background-color:red;}

但代码不起作用，它们适用于整个页面并删除背景颜色。请指导我如何处理这种情况？？？

Answer 1

你需要从内部移除一个标签，因为它针对的是同一个元素

a:hover:not([href*="#top"]) {
  color: #ffff35;
  background-color: #ff3355;
}
a:active:not([href*="#top"]) {
  color: #ffff35;
  background-color: red;
}

<a href="" name="nobgcolor">test</a>
<br>
<a href="" name="">test1</a>
<br>
<a href="#top" name="nobgcolor">test</a>
<br>
<a href="" name="">test1</a>

a:hover:not([name="nobgcolor"]) {
  color: #ffff35;
  background-color: #ff3355;
}

a:active:not([name="nobgcolor"]) {
  color: #ffff35;
  background-color: red;
}

<a href="" name="nobgcolor">test</a>
<br>
<a href="" name="">test1</a>
<br>
<a href="" name="nobgcolor">test</a>
<br>
<a href="" name="">test1</a>