CSS如何覆盖父主题中的特定选择器？

Question

我正在创建Limon主题的子主题。此父主题使用了许多特定的选择器，例如

div#container_wrap {}
div#header ul#nav {}
div.page_heading {}

我正在做一些修改，所以使用“！important”并不是一个理想的解决方案。在不诉诸！important的情况下覆盖这些div #ids的最佳方法是什么？特定选择器广泛用于父样式表。

由于

Answer 1

如果您不想使用!important，您可以始终将CSS包含在父主题中的CSS之后（并使用相同的选择器）。

或者更为极端的方法，如果你出于某种奇怪的原因不能这样做 - 使用更具体的选择器，例如：

body > div#container_wrap ...

Answer 2

将自定义样式置于原始样式下。写得像这样：

div#container_wrap {} // original style
div#header ul#nav {} // original style
div.page_heading {} // original style
div#container_wrap {...} // custom style
div#header ul#nav {...} // custom style
div.page_heading {..} // custom style

选中此http://jsfiddle.net/9KeN8/

Answer 3

首先，您对CSS规则过于具体。 ID 是您可以使用的最具体的选择器，因此无需通过添加指定父div的{​​{1}}来限定它。

以下规则就足够了。

ID