使用相同类的颜色背景不同

Question

我有四个<div>框，每个框都放在另一个框中，第一个框定义为class="a"，其余部分定义为class="b"现在我想在class="b"的帮助下做什么{1}}我想设置第三个方框background-color:red，以便如何只使用class="b"来完成我想要的不同的类或ID。是否可能？

<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和 第二JSFIDDLE

Answer 1

是的，这是可能的。

以这种方式使用CSS Selector：

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

更新了小提琴：http://jsfiddle.net/yH8e3/3/

对于第二种情况，您需要使用:nth-child选择器：

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