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>

Answer 2

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: green;
}

nav li:nth-child(2) a:hover {
  background: blue;
}

nav li:nth-child(3) a:hover {
  background: pink;
}

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

nth-child不在ul工作

2 个答案: