html - 使用同一类的颜色背景不同

Question

我有四个<div>盒子，每个盒子都放在另一个盒子里，第一个盒子定义为class="a"，其余定义为class="b"现在我想在class="b"我想设置第三个盒子的帮助下background-color:red做class="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和 2nd JSFIDDLE的帮助下使第三个框变红

Answer 1

是的，有可能。

以这种方式使用 CSS 选择器：

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。