如何使CSS规则在另一个div标签内采取不同的行为？

Question

假设我有一个CSS规则：

.rule1 {
    background: #FFF;
}

我希望这个CSS规则在另一个div标签内的行为不同，如下所示：

<div class="container">
<div class="rule1"></div> <!-- End of Rule1 -->
</div> <!-- End of Container -->

如果此rule1 div位于容器div内，我希望.rule1的背景为#CCC。

如何在CSS中指定它？

我见过并尝试过这样的事情：

.container: rule1 {background:#CCC}

但它不起作用。

感谢。

Answer 1

.container .rule1 {  }

CSS嵌套选择器，意思.rule1位于.container

内

Answer 2

您不需要冒号：

.container .rule1 {
    background: #CCC;
}

Answer 3

.rule1 {
     background:#FFF;
}
div.rule1 { /* if you want it applied just for divs with that class */
    background:#CCC;
}
.container .rule1 { /* if you want it applied to any child of .container */
    background:#111;
}

.container div.rule1 { /* if you want it applied to any child of .container that is only a div */
    background:#111;
}

Answer 4

的 jsFiddle Demo 的

您需要在嵌套时使用特异性来定位该规则，然后将其定义设置为inherit或您感兴趣的替代方案。

所以对于这个结构

<div class="container">
 <div class="rule1">rule1 nested</div>
</div>
<div class="rule1">rule1</div>

看起来像这样

.rule1 {
 background:#000;
 color:#fff;
}
.container .rule1{
 background:inherit;/*or alternative definition*/
 color:inherit;/*or alternative definition*/
}

Answer 5

.container .rule{
     /*your valid css rule*/
}