Question

如何在CSS3中选择导航元素？

我希望能够创建一个导航元素 - 当悬停时 - 改变为我想要的颜色。

如

<nav>
    <a href="#mainpage">first</a>  // i want to make this word, when hovered, into #555
    <a href="#secondpage">second</a>  // i want to make this word, when hovered, into #444
    <a href="#thirdpage">third</a>  //i want to make this word, when hovered, into #643312
    <a href="#fourthpage">fourth</a>  //i want to make this word, when hovered, into #444
    <a href="#fifthpage">fifth</a>  // i want to make this word, when hovered, into #666
</nav>

我如何实际做到这一点？

我正在阅读有关CSS3选择器但我没有看到任何解决方案（至少还没有），所以我想我会在Stack Overflow上得到更快的答案。我会继续搜索，看看我是否会产生任何结果。

Answer 1

检查一下：

click here

你想要这个吗？

nav a:nth-child(2),
nav a:nth-child(4),
nav a:nth-child(6){

....something

}








nav a:nth-child(2)
{
background:#ff0000;
}

Answer 2

也许您正在寻找when hovered :(不确定您的问题是不是很具描述性）

nav a:nth-child(1):hover
{
    color: #555
}
nav a:nth-child(2):hover
{
    color: #444
}
nav a:nth-child(3):hover
{
    color: #643312
}
nav a:nth-child(4):hover
{
    color: #444
}
nav a:nth-child(5):hover
{
    color: #666
}

JsFiddle.net Example

<强>更新

如果您想知道每个 N 的工作原理：

<style>
nav a:nth-child(3n+0):hover {
  background-color: #f00;
}
nav a:nth-child(3n+1):hover {
  background-color: #0f0;
}
nav a:nth-child(3n+2):hover {
  background-color: #0f0;
}
<style>

<nav>
 <a href="#mainpage">first</a> 
 <a href="#secondpage">second</a> 
 <a href="#thirdpage">third</a>  
 <a href="#fourthpage">fourth</a> 
 <a href="#fifthpage">fifth</a>  
 <a href="#sixthpage">sixth</a>  
</nav>

JsFiddle.net Example

元素（0,3,6,9等）将为绿色（＃f00）。

元素（1,4,7,10等）将为蓝色（＃0f0）。

元素（2,5,8,11等）将为红色（＃00f）。

Answer 3

有一个CSS 2.1解决方案：）

如果你想设置你的第一个链接的样式，你可以使用nav a:first-child选择器，对于第二个链接，你可以使用兄弟选择器，如下所示：

nav a:first-child + a{
    color: red; //coloring the second link
}
nav a:first-child + a + a{
    color: green; //coloring the third link
}
nav a:first-child + a + a + a{
    color: black; //coloring the fourth link
}
nav a:first-child + a + a + a + a{
    color: yellow; //coloring the fifth link
}

这样的解决方案可以在IE7上运行。

在CSS / CSS3中选择单个导航元素

3 个答案: