html - 如何使 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里面