与css的Navbar用不同的背景颜色

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这样的长选择器。您知道自己有一个navbar元素，只有一个a标记。所以只需缩短它并使用nav a依此类推......

Answer 2

是的，你可以使用：

nav > ul > li:nth-child(1){
   background: yellow;
}
nav > ul > li:nth-child(2){
   background: red;      
}
//etc...