Question

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

我正在关注本指南：https://css-tricks.com/useful-nth-child-recipies/

它提供了一个选择除了前5个之外的所有公式的公式 - 他们给出的例子如下：

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

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

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不能与n-child合作吗？我找不到任何其他说法的消息来源。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

悬停状态的第n个子公式 - 除第一个之外的所有元素

4 个答案: