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

【问题标题】：#wrapper div{...} styles override specific ID styles#wrapper div{...} 样式覆盖特定 ID 样式
【发布时间】：2014-02-08 18:00:23
【问题描述】：

我有几个 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 样式覆盖它并且背景颜色是灰色。

我知道我可以使用 !important，但这样做需要将它放在我想要与覆盖样式不同的每种样式上，这些样式可能跨越多个 div。必须有更好的方法来做到这一点吗？

【问题讨论】：

标签： html css

【解决方案1】：

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

#wrapper div{
   background-color: grey;
}

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

【讨论】：

非常感谢！有道理，虽然我真的希望 CSS 的默认功能没有必要。似乎与正常的级联格格不入。不过，它可能比我正在使用的任何东西都具有更高级别的应用程序。
当然，如果可以的话，您可以尝试添加类，这将允许您以更“正常”的方式使用 CSS 设置样式。如果您想进一步了解特异性，这是一本不错的读物：css-tricks.com/specifics-on-css-specificity

【解决方案2】：

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

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

【讨论】：