2

我试图在悬停时为每个菜单 li 赋予独特的背景颜色，并且我想使用 css2 来实现。

<ul>
    <li>
    <li>
    <li>
    <li>
</ul>

我能够使用以下命令在第一个元素上添加背景：

nav ul > li:hover:first-child a { background-color:red !important; }

当我在第二个元素上添加不同的背景时，仅当我将光标放在第一个元素上时才会出现下一个元素的悬停效果。

到目前为止，这是我的代码：

nav ul > li:hover:first-child a { background-color:red !important; }
nav ul > li:hover:first-child + li a { background-color:blue !important; }

有没有正确的方法来使用 CSS2 做到这一点？

我试图在下面的链接中深入了解这个 Boltclock 的答案。

如何使用 CSS2 选择器获取元素的第 n 个子元素？

任何帮助将不胜感激。

4

4 回答 4

5

第 n 个子元素由+链中的最后一个元素表示（在紧随其后的组合子之前，如果有的话），因此您可以将:hover选择器附加到该元素，如下所示：

nav ul > li:hover:first-child a { background-color:red !important; }
nav ul > li:first-child + li:hover a { background-color:blue !important; }

如果你想让第一个孩子更清楚，你可以重新排序伪类，放在:hover最后（即在 之后:first-child）：

nav ul > li:first-child:hover a { background-color:red !important; }
nav ul > li:first-child + li:hover a { background-color:blue !important; }

!important最后，正如其他人所提到的，除非您有特定的理由使用它们，否则您应该删除s。

于 2013-09-28T08:05:58.160 回答
2

@BoltClock 描述的方式是在 CSS2 中（按照您的要求）而不定义类的唯一方法（我个人会为每个列表项定义类作为您的解决方案，因为它更易于维护并且更容易记住几个月后它是如何工作的）。如果您可以使用 CSS3，那么nth-child可能就是您正在寻找的。

您的示例代码应如下所示：

nav ul > li:hover:first-child a { background-color:red; }
nav ul > li:first-child + li:hover a { background-color:blue; }
nav ul > li:first-child + li + li:hover a { background-color:green; }
nav ul > li:first-child + li + li + li:hover a { background-color:yellow; }
于 2013-09-28T08:05:43.657 回答
1 
<ul>
  <li><a href="#">red</a></li>
  <li><a href="#">blue</a></li>
  <li><a href="#">green</a></li>
  <li><a href="#">yellow</a></li>
  <li><a href="#">magenta</a></li>
</ul>

li:first-child:hover a { background-color: red; }
li:nth-child(5):hover a { background-color: magenta; }
于 2013-09-28T08:03:31.067 回答
0

在您的 html 中没有<a>标签，但 css 规则正在尝试为不存在的链接设置样式。试一试：

<ul>
  <li><a href="#">test 1</a></li>
  <li><a href="#">test 2</a></li>
  <li><a href="#">test 3</a></li>
  <li><a href="#">test 4</a></li>
  <li><a href="#">test 5</a></li>
</ul>

li:first-child:hover a { background-color: red; }
li:nth-child(2):hover a { background-color: blue; }

检查这个演示。

另请注意，!important除非您需要覆盖另一种样式，否则您不需要使用，这可能会出现问题，尽管有时很有用。

于 2013-09-28T07:46:44.393 回答