html - 具有不同背景颜色的CSS的导航栏

Question

我有以下导航栏:

nav ul {
  display: block;
  list-style-type: none;
  height: 52px;
}
nav ul li {
  display: inline-block;
  width: 90px;
  line-height: 52px;
  text-align: center;
  font-size: 15px;
}
nav ul li a {
  display: block;
  text-decoration: none;
  color: #000;
}
nav ul li a:hover {
  transition: 0.4s ease;
  background-color: pink;
}

<nav>
  <ul>
    <li><a href="#">One</a>
    </li>
    <li>
      <a href="#">Two</a>
    </li>
    <li>
      <a href="#">Three</a>
    </li>
    <li>
      <a href="#">Four</a>
    </li>
    <li>
      <a href="#">Five</a>
    </li>
    <li>
      <a href="#">Six</a>
    </li>
    <li>
      <a href="#">Seven</a>
    </li>
  </ul>
</nav>

我想要彩虹的背景色。我的意思是选项卡 1 将有紫色，选项卡 2 将有靛蓝......等等。我通过向每个 li 添加类来做到这一点。我也可以通过为每个 li 添加 id 来实现。没有更快的方法吗？ 仅限 CSS!

Answer 1

您可以使用nth-of-type() 选择器

nav ul {
  display: block;
  list-style-type: none;
  height: 52px;
}
nav li {
  display: inline-block;
  width: 90px;
  line-height: 52px;
  text-align: center;
  font-size: 15px;
}
nav a {
  display: block;
  text-decoration: none;
  color: #000;
}
li:hover {
  transition: 0.4s ease;
}
li:nth-of-type(1):hover {
  background-color: violet;
}
li:nth-of-type(2):hover {
  background-color: indigo;
}
li:nth-of-type(3):hover {
  background-color: blue;
}
li:nth-of-type(4):hover {
  background-color: green;
}
li:nth-of-type(5):hover {
  background-color: yellow;
}
li:nth-of-type(6):hover {
  background-color: orange;
}
li:nth-of-type(7):hover {
  background-color: red;
}

<nav>
  <ul>
    <li><a href="#">One</a>
    </li>
    <li>
      <a href="#">Two</a>
    </li>
    <li>
      <a href="#">Three</a>
    </li>
    <li>
      <a href="#">Four</a>
    </li>
    <li>
      <a href="#">Five</a>
    </li>
    <li>
      <a href="#">Six</a>
    </li>
    <li>
      <a href="#">Seven</a>
    </li>
  </ul>
</nav>

奖金

只是一个建议，不要使用像nav ul li a 这样的长选择器。你知道你有一个导航栏元素，只有一个 a 标签。所以只需缩短它并使用 nav a 等等......