Html 同一类标签上的CSS嵌套规则

我有两种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">

.stat{float:left；width:200px；height:40px；padding:5px；margin:5px；border:1px solid#000；}
.stat.red{背景色：#c00；}

只需留出空间：

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

我只是想澄清一下

.stat .red { ... }

或者更准确地说，类名之间的“”称为后代选择器。在您的情况下，这意味着只有类为“red”的元素，即类为“stat”的元素的后代，才会成为目标。e、 g

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

.stat.red

（无空格）什么是.stat.red选择器？

.xyz

称为类选择器，仅包含多个类。