悬停状态的nth -child公式 - 除第一个元素

Question

我想选择除悬停状态的第一个元素以外的所有元素。我正在使用nth-child()选择器进行此操作。

我正在遵循本指南：https：//css-tricks.com/useful-nth-child-recipies/

它给出了选择的公式，除了第一个5 - 它们给出的示例如下：

li:nth-child(n+6) {
    color: green;   
}

我想接受并应用它，以便它选择除 first 元素之外的所有内容。我这样做的方法是：

li:nth-child(n+1) {
    color: green;   
}

这不正确吗？

我需要尝试将其应用于悬停状态的情况，在该状态下，除了第一个LI之外，它仅执行:hover操作。请参阅下面的嵌入：

  li {
    display: inline-block;
  }
  
  a {
    margin-right: 1.8rem;
      padding-bottom: 23px;
  }
  
  #login-signup li:nth-child(n+1):hover {
    text-decoration: none;
    border-bottom: 3px solid #292c2e;
  }

<ul id="login-signup">
      <li> <a href="#">No Underline</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Sign Up</a></li>
    </ul>

如何应用公式以选择除nth-child的第一个元素以外的任何内容？:hover是否与nth-child不起作用？我找不到任何来源的消息来源。

Answer 1

我个人更喜欢在没有n个孩子的情况下这样做，只需使用一个简单的兄弟姐妹选择器：

li + li:hover {
  text-decoration: underline;
}

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

Answer 2

:nth-child()与:hover一起使用。:hover不是这里的问题。

仔细查看n 6示例。正如您提到的，那是第一个5。但是请注意，该表达式为6，而不是5。

要匹配除第一个元素以外的所有元素，您需要从2开始。因此，n 2。

li {
  display: inline-block;
}
a {
  margin-right: 1.8rem;
  padding-bottom: 23px;
}
#login-signup li:nth-child(n+2):hover {
  text-decoration: none;
  border-bottom: 3px solid #292c2e;
}

<ul id="login-signup">
  <li><a href="#">No Underline</a></li>
  <li><a href="#">Log In</a></li>
  <li><a href="#">Sign Up</a></li>
</ul>

Answer 3

您也可以使用:not(:first-child)解决此问题，因此您不必关心公式：

li {
  display: inline-block;
} 
a {
  margin-right: 1.8rem;
  padding-bottom: 23px;
}
#login-signup li:not(:first-child):hover {
  text-decoration: none;
  border-bottom: 3px solid #292c2e;
}

<ul id="login-signup">
  <li> <a href="#">No Underline</a></li>
  <li><a href="#">Log In</a></li>
  <li><a href="#">Sign Up</a></li>
</ul>

使用:not的另一个解决方案：

li {
  display: inline-block;
} 
a {
  margin-right: 1.8rem;
  padding-bottom: 23px;
}
#login-signup li:not(:nth-child(1)):hover {
  text-decoration: none;
  border-bottom: 3px solid #292c2e;
}

<ul id="login-signup">
  <li> <a href="#">No Underline</a></li>
  <li><a href="#">Log In</a></li>
  <li><a href="#">Sign Up</a></li>
</ul>

Answer 4

li {
  display: inline-block;
} 
a {
  margin-right: 1.8rem;
  padding-bottom: 23px;
}
#login-signup li:not(:eq(0)):hover {
  text-decoration: none;
  border-bottom: 3px solid #292c2e;
}

<ul id="login-signup">
  <li> <a href="#">No Underline</a></li>
  <li><a href="#">Log In</a></li>
  <li><a href="#">Sign Up</a></li>
</ul>