異なる背景色ブロックと異なる色相ブロックを持つナビゲーションバーブロックを作成したい

Question

異なる背景色ブロックと異なる色相ブロックを持つナビゲーションバーブロックを作成したいとします。私は別の吹き出しの色のブロックまたは異なる背景色のブロックを別々に作成することができますが、それを一緒に作成することはできません。だから、クラスを一緒に追加する方法を教えてください。

以下のコードは、

header { 
 
    width: 100%; 
 
    height: 70px; 
 
    box-sizing: border-box; 
 
    background-color: #373948; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    padding: 0px 0px 0px 30px; 
 
} 
 

 
header h1 { 
 
    float: left; 
 
    margin: 5px 0px; 
 
    color: white; 
 
    font-family: 'Meddon', cursive; 
 
} 
 

 
header nav ul { 
 
    height: 70px; 
 
    float: right; 
 
} 
 

 
header nav ul li { 
 
    height: 70px; 
 
    display: inline-block; 
 
} 
 

 
header nav ul li a { 
 
    height: 30px; 
 
    display: block; 
 
    padding: 17px 20px; 
 
    color: white; 
 
    font-size: 2.2em; 
 
    text-decoration: none; 
 
    border-top: 3px solid #373948; 
 
    border-bottom: 3px solid #373948; 
 
    -webkit-transition: color 1s ease; 
 
    -moz-transition: color 1s ease; 
 
    -o-transition: color 1s ease; 
 
    transition: color 1s ease; 
 
}

以下のコードは、これは間違っている可能性があり、変更を加える異なるlinks.pleaseに対して異なるホバー背景色のためのものであるナビゲーション・バーを作成するためのものです。

header nav ul li #link1 a:hover{ 
 
    background-color: #373948; 
 
} 
 

 
header nav ul li #link2 a:hover{ 
 
    background-color: #00ff00; 
 
} 
 

 
header nav ul li #link3 a:hover{ 
 
    background-color: #ff0000; 
 
} 
 

 
header nav ul li #link4 a:hover{ 
 
    background-color: #0000ff; 
 
}

以下のコードは、異なるリンクに異なる背景色のためのものです。

header nav ul li a.link-1 { background-color: #00c0e4; } 
 
header nav ul li a.link-2 { background-color: #e6567a; } 
 
header nav ul li a.link-3 { background-color: #eac14d; } 
 
header nav ul li a.link-4 { background-color: #5bd999; }

について、以下のコードでは上記の2つのコードに示すように、どのようにホバーとシンプルな背景色の両方を追加することを教えてください。

<header> 
 
    <nav role='navigation'> 
 
    <ul> 
 
     <li><a href="#"></a></li> 
 
     <li><a href="#"></a></li> 
 
     <li><a href="#"></a></li> 
 
     <li><a href="#"></a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

あなたは別のCSSクラスを作成し、あなたのさまざまのli要素に追加する必要があります。

CSS：

.red {background-color: rgb(240,0,0);color: white;} 
.red:hover {background-color: rgb(255,0,0);} 
.green {background-color: rgb(0,240,0);color: black;} 
.green:hover {background-color: rgb(0,255,0);} 

HTML：

<ul> 
<li class="red">bloc with red bg</li> 
<li class="red">bloc with red bg</li> 
<li class="green">bloc with green bg</li> 
</ul>