logo标签列表

第N个子元素颜色有问题

htmlcsscss-selectors
3

我想使用nth-child();让每个li都有不同的颜色。

这是我的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>

尽管我没有任何紫色的参考，但一切都是紫色的。

（注：此内容与IT技术无关，仅作示例，请提供相关的IT技术内容进行翻译。）

1
你的锚点只是列表项的子元素，所以nth-child正在发挥作用。每个锚点都没有兄弟姐妹，这正是nth-child要查找的内容。 - j08691
3个回答
1

nth-child需要具有父元素和同级元素的HTML元素。在这种情况下，符合条件的元素是<LI>，每个元素都恰好有一个<a>元素。需要调整CSS，以便选择每个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: #9ff;
}
header ul li:nth-child(4) a {
    color: #000;
}
header ul li:nth-child(5) a {
    color: #c8c;
}
<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>

注意：我更改了与最后两个<a>标签相关的颜色，只是为了突出结果。
此外，在浏览器更改链接颜色方面，当CSS使用:nth-child按照指定方式应用时，即使链接是已访问过的链接，浏览器也会遵循指定的颜色。
顺便说一下，如果您希望项目符号的颜色与其相应的链接匹配，CSS只需要进行小幅修改：
header ul li:nth-child(1),  li:nth-child(1) a {
    color: #8cf;
}
header ul li:nth-child(2), li:nth-child(2) a {
    color: #f8c;
}
header ul li:nth-child(3), li:nth-child(3) a {
    color: #9ff;
}
header ul li:nth-child(4), li:nth-child(4) a {
    color: #000;
}
header ul li:nth-child(5), li:nth-child(5) a {
    color: #c8c;
}

在这里查看实时代码here。

如果HTML重写为包含在块中的多个链接，例如P元素，则A元素将符合nth-child选择，如此处所示here。

0

在头部添加 "ul li:nth-child(1) a" 将会使锚点标签显示不同的颜色。

代码已添加 查看代码

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接