使用同一类的颜色背景不同答案

【问题标题】：Color Background different using Same class使用同一类的颜色背景不同
【发布时间】：2012-09-05 19:03:27
【问题描述】：

我有四个<div> 盒子，每个盒子都放在一个里面，第一个盒子定义为class="a"，其余的现在定义为class="b" 我想在class="b" 的帮助下做什么我想设置第三个框 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

【问题讨论】：

你试过 div.A .B .B .B{background:red;} 吗？
@Chandrakant no 但现在我知道该用什么了
在线上有答案...但是使用选择器:nth-child 的问题是可以使用该选择器完成还是应该去其他地方。？

标签： html css css-selectors

【解决方案1】：

是的，这是可能的。

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

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

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

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

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

【讨论】：

同样，最好避免在 CSS 中使用标签。即，考虑只使用.B 而不是div.B。 :) 有时，将来它可能会从div 更改为span。只是一个用例。这就是我们遵循的方式。 :)
嘿，如果我执行 div.b .b .b 那么它会将两个框都涂成红色，为什么会这样？
不可能！如何？你看到小提琴了吗？哪两个盒子？它只影响最里面的盒子。
也用:nth-child() 更新了答案。 :)
在这种情况下，当我只为第二个 B 框着色时，它也适用于第三个 jsfiddle.net/yH8e3/19

【解决方案2】：

试试（IE7+）

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

或

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

【讨论】：

此解决方案仅用于将第二个红色和第三个透明或任何其他颜色着色

【解决方案3】：

试试这个：

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

它将最里面的div的背景设置为红色。

我们可以使用标签来应用css，也可以找到我们可以使用的完美div。

【讨论】：

是的，这是可能的。

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

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

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