css - 将非选择器添加到样式会破坏样式

Question

我正在尝试将某种hover 样式应用到所有元素除了 第一个元素。出于某种奇怪的原因，:first-child 有效，但添加 :not(first-child) 无效。为什么？完整的 JSFiddle here .

编辑:
显然，一小部分代码的添加打破了这种风格，我没有添加到原始 fiddle 中，因为我认为这无关紧要，现在我意识到它确实如此。请注意，当附加标签位于 a 标签之间时，该样式不起作用，如下所示:

<div id="mySidenav" class="sidenav">
  <div id="logoContainer">
    <a href="https://www.google.com/">
      <img src="assets/img/logo_white.png" alt="logo">
    </a>
  </div>
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

工作 CSS:

.sidenav a:first-child:hover{
    color: red;
}

根本不工作 CSS:

.sidenav a:not:(first-child):hover{
    color: red;
}

Answer 1

这利用了 :not 的组合伪选择器和直接后代选择器仅将样式应用于 <a> 直接 或直接 的元素，.sidenav 的后代.

自从您的第一个 <a> element 是 .sidenav 的孙子，而不是直子, 它没有得到 color: red造型感谢> ，并且由于您关闭的“x”具有 closebtn 类, 我们可以使用 :not(.closebtn)也可以消除那个红色样式:

.sidenav > a:not(.closebtn):hover{
    color: red;
}

<div id="mySidenav" class="sidenav">
    <div id="logoContainer">
        <a href="https://www.google.com/">
            <img src="assets/img/logo_white.png" alt="logo">
        </a>
    </div>
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>