1

有没有更简单的解决方案？我想让我所有的导航列表在悬停时都具有不同的背景颜色。现在我用 id-s 来制作它。现在代码如下所示。更新后的代码可以查看http://kontaktfotovideo.hu。

<nav>
  <ul>
    <li><a id="darkcyan" href="#">Link</a></li>
    <li><a id="darkgray" href="#">Link</a></li>
    <li><a id="skyblue" href="#">Link</a></li>
    <li><a id="coral" href="#">Link</a></li>
    <li><a id="sandybrown" href="#">Link</a></li>
    <li><a id="crimson" href="#">Link</a></li>
  </ul>
</nav>

div#navbar {
    background-color: #787878;
} 

div#navbar ul {
    list-style: none;
}

div#navbar ul li {
    float: left;
    width: 16.666666%;  
}

div#navbar a:link,div#navbar a:visited  {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    padding: 0;
    padding: 5px 95px 20px 5px;
    border-right: 1px solid #f2f2f2;
}

#darkcyan:hover, #darkcyan:active {
    background-color: #00a78d;
}

#darkgray:hover, #darkgray:active {
    background-color: #b995c5;
}

#skyblue:hover, #skyblue:active {
    background-color: #7db6d3;
}

#coral:hover, #coral:active {
    background-color: #f68e51;
}

#sandybrown:hover, #sandybrown:active {
    background-color: #f9d855;
}

div#navbar #crimson:link, div#navbar  #crimson:visited {
    border-right: #787878;
}

#crimson:hover, #crimson:active {
    background-color: #db343b;
}
4

1 回答 1

2

您可以使用第 n 个子选择器。

交叉兼容性：http ://caniuse.com/#feat=css-sel3

JSFiddle：http: //jsfiddle.net/2HmUk/

CSS：

nav ul li:nth-child(1) a { color: orange; }
nav ul li:nth-child(2) a { color: red; }
nav ul li:nth-child(3) a { color: green; }
nav ul li:nth-child(4) a { color: brown; }
nav ul li:nth-child(5) a { color: yellow; }
nav ul li:nth-child(6) a { color: purple; }

对于悬停只需添加:hover选择器：http: //jsfiddle.net/2HmUk/1/

nav ul li:nth-child(1) a:hover { color: orange; }

也可以是：

nav ul li:nth-child(1):hover a { color: orange; }
于 2013-06-04T16:15:24.447 回答