CSS：一個屬性多類

Question

我有以下幾點：

.category-2 .content aside {margin-top: 4px;} 
.category-3 .content aside {margin-top: 4px;} 
.category-4 .content aside {margin-top: 4px;} 

如何使用一個邊距爲所有三個類別？

Answer 1

使用「」字符爲您的屬性共享給多個選擇：

.category-2 .content aside, 
.category-3 .content aside, 
.category-4 .content aside 
{ 
    margin-top: 4px; 
} 

格式化CSS的這種方式被稱爲逗號分隔選擇，作爲@Aaron建議。

Answer 2

你可以使用：

div[class^="category"] { margin-top: 4px; } 

Answer 3

要麼你寫成這樣

.category-2 .content aside,.category-3 .content aside,.category-4 .content aside {margin-top: 4px;}

，或者依賴於HTML結構的其餘部分如

#category aside { margin-top:4px;}

<div id ="category"> 
 
    <div class="category-2"> 
 
    <div class="content"> 
 
     <aside> 
 
     <p>blabla</p> 
 
     </aside> 
 
     </div> 
 
    </div> 
 
    <div class="category-3"> 
 
    <div class="content"> 
 
     <aside> 
 
     <p>blabla</p> 
 
     </aside> 
 
     </div> 
 
    </div> 
 
    <div class="category-4"> 
 
    <div class="content"> 
 
     <aside> 
 
     <p>blabla</p> 
 
     </aside> 
 
     </div> 
 
    </div> 
 
    </div>