第n个孩子不在ul工作 [英] nth-child not working in ul

问题描述

我有一个简单的< nav> ，里面有一个无序列表:

I have a simple <nav> with an unordered list inside:

nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
nav ul li a {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
nav ul li a:hover {
  background: #000;
}
nav li a:nth-child(1):hover {
  background: red;
}

<nav>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#music">MUSIC</a>
    </li>
    <li><a href="#livestream">LIVESTREAM</a>
    </li>
    <li><a href="#links">LINKS</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
  </ul>
</nav>

我试图为每个孩子的悬停颜色添加不同的颜色< a> 但是相反，它选择了所有这些(以红色突出显示)

I am trying to make a different color on hover for each child <a> but instead it is selecting all of them (highlighting them red)

nav li a:nth-child(1):hover {
  background: red;
}

我在做什么错了?

推荐答案

您的所有 A 都是其父级的第一个元素.您必须在 LI 元素上而不是在 A 上应用 nth-child :

All your A are the first element of their parent. You must apply the nth-child on the LI element, not on the A:

nav li:nth-child(1) a:hover {
  background: red;
}

nav {
  position: absolute;
  right: 0px;
  white-space: nowrap;
}
nav ul {
  padding: 0;
  margin: 0;
}
nav ul li {
  clear: both;
  white-space: nowrap;
  color: white;
  display: inline-block;
}
nav ul li a {
  color: white;
  background: black;
  text-decoration: none;
  text-align: center;
  font-family: statellite;
  padding-left: 25px;
  padding-right: 25px;
  height: 37px;
  margin-left: -4px;
  padding-top: 18px;
  display: inline-block;
}
nav ul li a:hover {
  background: #000;
}
nav li:nth-child(1) a:hover {
  background: red;
}
nav li:nth-child(2) a:hover {
  background: #555;
}
nav li:nth-child(3) a:hover {
  background: green;
}
nav li:nth-child(4) a:hover {
  background: blue;
}

<nav>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#music">MUSIC</a>
    </li>
    <li><a href="#livestream">LIVESTREAM</a>
    </li>
    <li><a href="#links">LINKS</a>
    </li>
    <li><a href="#about">ABOUT</a>
    </li>
  </ul>
</nav>

这篇关于第n个孩子不在ul工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！