html - 悬停时如何更改标题导航栏链接中单个文本项的颜色和背景颜色？

Question

HTML

<!-- start nav here -->
<nav>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our History</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
    <li>
      <aa href="#">Contact Us</a>
    </li>
  </ul>
</nav>
<!-- end nav here -->

CSS

  header nav li {
    background-color: #CECDC0;
    font-size: 20px;
    font: Noteworthy;
    color: blue;
    float: left;
    margin: 10px;
    margin-top: -2px;
  }

  header nav {
    display: block;
    float: right;
    line-height: -30px;
  }

  header nav li a:hover {
    color: red;
  }

当我像上面的例子一样添加悬停效果时，它使导航栏中的所有文本悬停。我希望“关于我们”具有不同的悬停背景颜色和字体颜色。如何编辑 html 或 css？

Answer 1

这个更干净，因为父元素应该早于子元素。

nav {
  display: block;
}
nav li{
  display: inline-block;
  float: left;
  margin: 10px;
  margin-top: -2px;
}
nav li a{
  background-color: #CECDC0;
  font-size: 20px;
  font: Noteworthy;
  color: blue;
  padding:5px 2px;
  line-height: 30px;
  text-decoration:none;
}
nav li:first-child a:hover {
  color: #fff;
  background-color: gold;
}
nav li a:hover {
  color: red;
}

<nav>
 <ul>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Our History</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Contact Us</a></li>
 </ul>
</nav>