Question

这有更简单的解决方案吗？我希望在悬停时使所有导航列表都具有不同的背景颜色。现在我用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;
}

Answer 1

您可以使用第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; }

悬停时具有不同颜色的水平导航菜单

1 个答案: