nth-child不在ul工作

Question

我有一个简单<nav>的内部无序列表:

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> 而是选择所有这些颜色(突出显示为红色)

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

我究竟做错了什么？

Answer 1

你所有人A都是他们父母的第一个元素.您必须nth-child在LI元素上应用,而不是在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>