#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