1

如何在 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 上得到更快的答案。我会继续搜索，看看是否有任何结果。

4

3 回答 3

5

检查这个：

点击这里

你想要这个吗 ？

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

....something

}








nav a:nth-child(2)
{
background:#ff0000;
}
于 2012-04-22T00:58:25.317 回答
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 示例​</p>

更新

如果您想知道每个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 示例

元素（0、3、6、9 等）将为绿色 (#f00)。

元素（1、4、7、10 等）将为蓝色 (#0f0)。

元素（2、5、8、11 等）将为红色 (#00f)。

于 2012-04-22T00:59:56.470 回答
1

有一个 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 开始工作。

于 2012-04-22T15:38:01.870 回答