Question

我正在尝试使用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>

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

Answer 1

您需要在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>

Answer 2

第n个孩子需要是一个包含父母和兄弟姐妹的HTML元素。在这种情况下，限定元素是＆lt; LI＆gt;。并且每个人恰好具有一个＆lt; a＆gt;。元件。 CSS需要调整，以便选择每个LI元素并将样式应用于其单独的A元素。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

注意：我更改了与最后两个＆lt; a＆gt;相关的颜色。标签只是为了突出显示结果。

此外，对于浏览器更改链接颜色，当相应地应用使用：nth-child的CSS时，即使链接是访问过的链接，浏览器也会遵循指定的颜色。

顺便提一下，如果您希望子弹颜色与其各自的链接相匹配，那么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元素将符合第n个孩子的选择，如here所示。

Answer 3

添加标题＆＃34; ul li：nth-child（1）a＆＃34;将制作不同颜色的锚标签。

在此处添加了代码View Code

nth-child颜色错了

3 个答案: