多個任意兒童的CSS短手

在CSS中，如果我想給一個給定類的3個子類設置風格，是否有一種以不需要根類的方式做到這一點的簡捷方法爲每個子類重複？多個任意兒童的CSS短手

例如，讓說我有這個網站：

<div class="parent1"> 
    <div class="subClass1">Sub-Class-1</div> 
    <div class="subClass2">Sub-Class-2</div> 
    <div class="subClass3">Sub-Class-3</div> 
    <div class="subClass4">Sub-Class-4</div> 
    <div class="subClass5">Sub-Class-5</div> 
    <div class="subClass6">Sub-Class-6</div> 
</div> 

<div class="parent2"> 
    <div class="subClass1">Sub-Class-1</div> 
    <div class="subClass2">Sub-Class-2</div> 
    <div class="subClass3">Sub-Class-3</div> 
    <div class="subClass4">Sub-Class-4</div> 
    <div class="subClass5">Sub-Class-5</div> 
    <div class="subClass6">Sub-Class-6</div> 
</div>

我想使子類1，3，parent1紅6（而不影響parent2子類）。我會做到這一點的方法是在CSS是：

.parent1 .subClass1, 
.parent1 .subClass3, 
.parent1 .subClass6 
{ 
    color: red; 
}

是否有CSS語法在那裏我可以做這樣的事情，而不是：

.parent1 (.subClass1, .subClass3, .subClass6) 
{ 
    color: red; 
}

......從而使parent1類只需鍵入一次？

來源

2017-09-05 Lonnie Best

不，不在CSS中。您可能需要查看CSS預處理器，例如LESS或SASS。 – CBroe

在navitve CSS中，沒有。在像LESS或SASS這樣的預編譯器中，是的，你可以做'.class1 {.class2，.class3，.class3 {/ * styles * /}}' – Utkanos

我不知道你不能只使用'nnth-child'這個。 – raina77ow

不是你所描述的方式，但在具體的例子中，你可以使用nth-child樣式每個奇數孩子：

.parent1 div:nth-child(odd) { 

}

或者，如果每次你想指定的類中常見的有文本，你可以使用屬性選擇：

.parent1 div[class*=subClass] { 

}

這將定向在同級車具有subClass某處parent1的所有兒童。所以在你的情況下會選擇所有的孩子。

來源

2017-09-05 11:19:35

我編輯了我的問題，強調我是在任意選擇後（「奇數」不起作用）。 –

多個任意兒童的CSS短手

回答

相關問題