Question

我正在尝试将某种hover样式应用于除之外的所有元素。由于某些奇怪的原因:first-child有效，但添加:not(first-child)则不然。为什么？完整的JSFiddle here。

编辑：
显然，一小部分代码打破了这种风格，我没有添加到原来的小提琴，因为我不认为这很重要，现在我意识到它确实如此。请注意，如果其他标记位于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

这利用了<a>伪选择器和直接后代选择器的组合，仅将样式应用于立即或 direct <的<{1}}元素/ em>，.sidenav的后代。

由于您的第一个<a>元素是{@ 1}}的祖母而不是直接的孩子，因此{{1}无法获得.sidenav样式而且，因为你的亲密＆＃39; x＆＃39;有一个color: red类，我们可以使用>来消除那个获得红色样式的那个：

＆＃13;
＆＃13;
closebtn
＆＃13;
:not(.closebtn)
＆＃13;
＆＃13;
＆＃13;

Answer 2

您的语法看起来有些错误。尝试：

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

Updated JSFiddle

Answer 3

您可以结合使用直接子>和下一个同级+选择器。

＆＃13;

.sidenav > a + a:hover {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 4

你可以尝试

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

添加非选择器到样式中断样式

4 个答案: