在同一類標記上的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 { ... } 

或更確切地說是 「」 的類名之間，被稱爲後代選擇。在你的情況下，這意味着只有類別爲「紅色」的元素，即後代的元素「類別」將成爲目標。例如

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