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

当我添加上面示例中的悬停效果时，它会使导航栏中的所有文本都悬停。我想＆＃34;关于我们＆＃34;为它提供不同的悬停背景颜色和字体颜色。如何编辑html或css？

Answer 1

您可以这样做以选择第一项（关于我们）：

header nav li:first-child a:hover {
 color: red;
}

Answer 2

您可以使用类来定位特定列表项。

Jsfiddle

HTML

<nav>
  <ul>
    <li class="target"><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>

CSS

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

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

nav li a:hover {
  color: red;
}

.target a:hover {
  color: #fff;
  background-color: gold;
}

Answer 3

我不确定你想要什么，但以下是我的解释。

https://jsfiddle.net/Vuice/1dodL81o/

HTML

<header>
  <!-- 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><a href="#">Contact Us</a></li>
    </ul>
  </nav>
  <!-- end nav here -->
</header>

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;
}
header nav li:first-child a:hover {
  color: yellow;
  background-color: green;
}

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: