Ian*_*rdo 3 html css html5 css-selectors css3
我试图使每个li使用不同的颜色nth-child();
这是我的CSS:
header ul a:nth-child(1) {
color: #8cf;
}
header ul a:nth-child(2) {
color: #f8c;
}
header ul a:nth-child(3) {
color: #8fc;
}
header ul a:nth-child(4) {
color: #b9b;
}
header ul a:nth-child(5) {
color: #c8c;
}
这是我的HTML:
<body>
<div id="main">
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="forums.html">Forums</a></li>
<li id="iamhere"><a href="instruction.html">Instruction</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
即使我在任何地方都没有紫色的参考,一切都是紫色的.
您需要nth-child()在li标签上使用,您的a标签没有任何兄弟姐妹.紫色是您已访问过的链接的浏览器默认颜色.
header ul li:nth-child(1) a {
color: #8cf;
}
header ul li:nth-child(2) a {
color: #f8c;
}
header ul li:nth-child(3) a {
color: #8fc;
}
header ul li:nth-child(4) a {
color: #b9b;
}
header ul li:nth-child(5) a {
color: #c8c;
}<div id="main">
<header>
<nav>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="blog.html">Blog</a>
</li>
<li><a href="forums.html">Forums</a>
</li>
<li id="iamhere"><a href="instruction.html">Instruction</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>| 归档时间： |
|
| 查看次数： |
86 次 |
| 最近记录： |