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

あなたは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 2

他のサイトのコードに基づいています。これは、あなたが探している変換です。

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

を使用してそれらを回転させる、あなたの他の目標を達成することができます:nth-child()異なる要素の色を設定する疑似セレクタ！変換ではなくのみaの全体のdivの上にマウスで発生しますので、我々は代わりにaタグのliタグに:hover擬似セレクターを追加した場合のdivを回転させる

その後

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

は、私がその良く考えますタグ。そのための対応する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); 
} 

私はまた、デフォルトでは存在している下線を削除するaタグにtext-decoration:noneを追加しました。

下記のスニペットを参照して問題がある場合はお知らせください。これは、（私が正しくあなたの質問を理解している場合） このコードのほとんどは、あなたが

主な違いで供給リンクからコピーされたあなたは、あなたが望むもので始める必要があります

.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

このコードは他の答えから、背景は回転しますが、テキストはありません

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

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