これらの3つのタブにそれぞれ個別の背景色を付けるにはどうすればよいですか？

Question

私は3つのタブがあり、それぞれのタブの背景が独自の色を持つようにしています。今、彼らはすべて灰色です。タブ1、タブ2、タブ3の各色をどのように与えるのですか？

http://jsfiddle.net/Lance_Bitner/4zLkb6v0/

.tabs a:hover, 
.tabs a.active { 
background: #666; 
color: #fff; 
} 

Answer 1

は私の答えをチェックしてください：http://jsfiddle.net/4zLkb6v0/5/

、本質的には、各ラベルのためのあなたの属性のために使用することができます

を

.tabs .tab label[for='tab-1'] { 
    background-color: red; 
} 
.tabs .tab label[for='tab-2'] { 
    background-color: orange; 
} 
.tabs .tab label[for='tab-3'] { 
    background-color: blue; 
} 

おそらく各ラベルのクラスが良いでしょう、私はまたあなたの入れ子のいくつかをきれいにするでしょう、あまりにも多くのDIVが互いに入れ子になっています。

Answer 2

CSSのn番目の子のプロパティを使用してみてください：

.tabs a:nth-child(1){ 
    background: red; 
} 
.tabs a:nth-child(2){ 
    background: blue; 
} 
.tabs a:nth-child(3){ 
    background: green; 
}