html - 如何使用 CSS 为导航中的每个 child 应用不同的颜色

Question

我正在使用 HTML 和 CSS，我正在尝试更改导航中第一个子项的颜色。我试图实现导航中的所有元素都采用不同的颜色，并且当将鼠标悬停在它们上面时，它们会稍微旋转到一边。这个网站上有很好的例子:https://www.templatemonster.com/demo/54875.html

这是我的导航代码:

.navigation li {
  display: inline-block;
}

.navigation li:nth-child(1) {
  background: #ffc200;
}

.navigation a {
  color: #FFF;
  white-space: nowrap;
  padding: 25px 29px 31px;
}

.navigation a:hover,
.navigation a.active {
  color: #fff;
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

<nav class="navigation" role="navigation">
  <ul class="primary-nav">
    <li><a href="#intro">About</a></li>
    <li><a href="#services">services</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#teams">Our Team</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

我的元素中的导航也像示例中那样固定在滚动条上。

Answer 1

您可以使用 li:nth-child() 定位每个 child ，并使用 transform: rotate(5deg);

实现旋转它们的其他目标

.navigation li {
  display: inline-block;
}

.navigation a {
  white-space: nowrap;
  padding: 25px 29px 31px;
}

li:nth-child(1) a { background: #636393; }
li:nth-child(2) a { background: #B5222D; }
li:nth-child(3) a { background: #D4953C; }
li:nth-child(4) a { background: #609491; }

li:hover{
  transform: rotate(5deg);
}

<nav class="navigation" role="navigation">
  <ul class="primary-nav">
    <li><a href="#intro">About</a></li>
    <li><a href="#services">services</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#teams">Our Team</a></li>
  </ul>
</nav>