如何重用CSS選擇器？

Question

我有以下的CSS：

.foo .bar { 
    background: red; 
} 

工作正常以下HTML：

<div class="foo"> 
    <div class="bar">I have a red background</div> 
</div> 

，但我似乎無法找到一個方法來重複使用CSS定義，當我不在父母/子女關係中。例如，我怎麼能適用相同的CSS以下DIV：

<div class="???">I want a red background!</div> 

Answer 1

多個選擇，您可以添加額外的選擇與在W3C selectors grouping

.foo .bar, .foobar { 
    background: red; 
} 

規定，這將在兩個

工作逗號（，） 210

<div class="foo"> 
    <div class="bar">I have a red background</div> 
</div> 

和

<div class="foobar">I want a red background!</div> 

Answer 2

您可以用逗號來指示CSS規則應適用於

.foo .bar, .??? { 
    background: red; 
} 

Answer 3

用逗號分隔的選擇列表中的定義：

.foo .bar, .otherSelector, #someID{ 
    background: red; 
} 

Answer 4

.foo .bar, .redback { 
    background: red; 
} 

會做一個魔術

<div class="redback">I want a red background!</div> 

或擺脫層次結構並僅使用

.bar { 
    background: red; 
} 

將工作這兩種情況下

Answer 5

嘗試

.foo .bar, .foobar { 
    background: red; 
} 

與

<div class="foo"> 
    <div class="bar">I have a red background</div> 
</div> 

<div class="foobar">I want a red background!</div> 

Answer 6

的 「包含.foo的.bar」 CSS定義明確書面父子（更準確的祖先 - 派生）關係。

你可以寫這樣的CSS：

.alternate-background { 
    background: red; 
} 

和HTML這樣的：

<div> 
    <div class="alternate-background">I have a red background</div> 
</div> 

這將讓你也使用這個：

<div class="alternate-background">I want a red background!</div>