#wrapper指定的div {...}樣式覆蓋特定的ID風格

Question

我已經嵌套在一個#wrapper指定格內幾個div的，像這樣

<div id="wrapper"> 
     <div id="one"></div> 
     <div id="two"></div> 
     <div id="three"></div> 
    </div> 

我的造型都div的包裝內，還需要一些具體的內部div的樣式。像這樣的例子。

#wrapper div{ 
    background-color: grey; 
} 

#one{ 
    background-color: blue; 
} 

，而不是背景色#one格是藍色的，#wrapper指定格樣式覆蓋它和背景顏色爲灰色。

我知道我可以使用！很重要，但是這樣做需要將其應用於每種不同於重寫樣式的樣式，這可能會跨越多個div。必須有更好的方法來做到這一點？

Answer 1

因爲有一個id的父元素的特殊性，你需要爲你的其他分區創建一個較高的特異性規則這樣：

#wrapper div{ 
    background-color: grey; 
} 

#wrapper #one{ 
    background-color: blue; 
} 

Answer 2

您可以只覆蓋它通過提供更具體的規則你#one DIV這樣的：

#wrapper #one{ 
    background-color: blue; 
} 

Fiddle Demo