如何使用CSS在导航中为每个孩子应用不同的颜色

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

基于其他网站的代码..这将是您正在寻找的转型。

.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);
}
.navigation li:hover{
    -moz-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -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 2

您可以使用li:nth-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>

Answer 3

所以我开始使用:nth-child()伪选择器来设置不同元素的颜色！

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

然后要旋转div，我认为如果我们将:hover伪选择器添加到li标记而不是a标记会更好，因为转换将在鼠标悬停时发生整个div而不是a标记。对应的CSS类是。

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

我还在text-decoration:none标记中添加了a，以删除默认情况下显示的下划线。

请参阅以下代码段，如果有任何问题，请与我们联系！

.navigation li {
  display: inline-block;
}

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

.navigation li:nth-child(2) {
  background: magenta;
}

.navigation li:nth-child(3) {
  background: purple;
}

.navigation li:nth-child(4) {
  background: orange;
}

.navigation li:nth-child(5) {
  background: red;
}

.navigation li:nth-child(6) {
  background: lightblue;
}



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

.navigation li:hover,
.navigation li:active {
  color: #fff;
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-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 4

这应该让你开始你想要的东西（如果我正确理解你的问题） 大部分代码都是从您提供的链接中复制的

此代码与其他答案的主要区别在于背景旋转但不是文本

＆＃13;

＆＃13;

ol,ul {
  list-style: none;
}

/*each of your colors can be set here*/
.sf-menu>li:nth-child(1):after {
  background: #ffc200;
}
.sf-menu>li:nth-child(2):after {
  background: red;
}
.sf-menu>li:nth-child(3):after {
  background: green;
}
.sf-menu>li:nth-child(4):after {
  background: blue;
}
.sf-menu>li:nth-child(5):after {
  background: blueviolet;
}


.sf-menu>li {
  position: relative;
  float: left;
  z-index: 0;
  margin: 0 20px;
}

.sf-menu {
  display: inline-block;
}

.sf-menu>li>a {
  font-size: 18px;
  line-height: 28px;
  padding: 11px 15px;
}

.sf-menu>li>a {
  color: #FFF;
  font: 600 24px/35px "Raleway", sans-serif;
  white-space: nowrap;
  padding: 25px 29px 31px;
  text-decoration: none;
}

.sf-menu:before,
.sf-menu:after {
  display: table;
  content: "";
  line-height: 0;
}

.sf-menu a {
  display: block;
}

.sf-menu>li:after {
  content: '';
  position: absolute;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  outline: 1px solid transparent;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.sf-menu>li.sfHover:after,
.sf-menu>li:hover:after,
.sf-menu>li.active:after {
  -moz-transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<nav class="nav">
  <ul class="sf-menu">
    <li class="active">
      <a href="./">Home</a>
    </li>
    <li class="">
      <a href="index-1.html">About school</a>
    </li>
    <li class="">
      <a href="index-2.html">Class schedules</a>
    </li>
    <li>
      <a href="index-3.html">Kids' art gallery</a>
    </li>
    <li>
      <a href="index-4.html">Contacts</a>
    </li>
    <li>
      <a href="index-4.html">link</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;