CSS嵌套规则在同一个类标记上

Question

我有两个css样式，第二个我只想在第一个出现时生效。我该怎么办呢？我知道你可以在类标签中添加多个类，但似乎不能以相同的方式嵌套css标签。

.stat{float: left; width: 200px; height: 40px; padding: 5px; margin: 5px; border: 1px solid #000;}
.stat .red{background-color: #c00;}


<!-- This should have the background color -->
<div class="stat red">

<!-- This should not have the background color -->
<div class="red">

<!-- This should not have the background color -->
<div class="stat">

Answer 1

只留下空间：

.stat.red{background-color: #c00;}

Answer 2

仅供澄清

.stat .red { ... }

或者更确切地说，类名之间的“”被称为后代选择器。在您的情况下，这意味着只有具有“红色”类的元素，即具有“stat”类的元素的后代才会被定位。 e.g。

<div class="stat">
   <div class="red"></div>
</div>