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

Question

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

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

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

谢谢

Answer 1

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

或者，如果您由于某些奇怪的原因无法做到这一点，则采用更极端的方法 - 使用更具体的选择器，例如：

body > div#container_wrap ...

Answer 2

一方面，您的 CSS 规则过于具体。AnID是您可能使用的最具体的选择器，因此无需通过添加div指定 parent来限定它ID。

以下规则就足够了。

#container_wrap {}
#nav {}
.page_heading {}

Answer 3

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

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/