#wrapper div {...}样式覆盖特定的ID样式

Question

我有几个div嵌套在#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 div为蓝色的背景颜色，＃wrapper div样式覆盖它，背景颜色为灰色。

我知道我可以使用！重要，但这样做需要将它放在我希望与最重要的样式不同的每种样式上，这可能是多个div中的许多样式。必须有更好的方法来做到这一点吗？

Answer 1

由于父元素具有id的特殊性，您需要为其他div创建更高的特异性规则：

#wrapper div{
   background-color: grey;
}

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

Answer 2

您可以通过为#one div提供更具体的规则来覆盖它：

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

<强> Fiddle Demo