html - 同じクラスを使用して異なる色の背景

Question

私は4つの<div>ボックスをそれぞれ別の内部に配置し、最初のボックスは次のように定義し、class="a"残りはclass="b"現在のように定義しclass="b"ます.したいのですが、できますか？background-color:redclass="b"

<div class="A">
<div class="B">
<div class="B">
<div class="B"></div>
    </div>
</div>
</div>

そして、このような場合

<div class="A">
    <div class="B"></div>
    <div class="B"></div>
    <div class="B"></div>    

    </div>

次に、クラスのみのJSFIDDLEと2番目の JSFIDDLEを使用して、3番目のボックスを赤くするにはどうすればよいですか

Answer 1

はい、可能です。

CSS セレクターを次のように使用します。

div.B .B .B
{
    background-color:red;
}​

更新されたフィドル: http://jsfiddle.net/yH8e3/3/

:nth-child2 番目のケースでは、セレクターを使用する必要があります。

.A .B:nth-child(3)
{
    background-color:red;
}​

Answer 2

試してください (IE7+)

.a > .b > .b {
  background-color:red;
}

また

.a .b .b {
  background-color:red;
}
.a .b .b .b {
  background-color:transparent;
}

Answer 3

これを試して：

div div div .B { background-color:red }

最も内側の div の背景を赤に設定します。

タグを使用して CSS を適用したり、使用できる完璧な div を見つけたりすることができます。