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

【问题标题】：CSS How to override specific selectors in parent theme?CSS如何覆盖父主题中的特定选择器？
【发布时间】：2013-02-06 11:46:44
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： css parent-child css-selectors overriding

【解决方案1】：

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

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

body > div#container_wrap ...

【讨论】：

#container_wrap#container_wrap /* I mean it! */
谢谢@minitech！如果我在子样式表中放置相同的选择器，那不是已经将它放在“父主题之后”了吗？或者你的意思是把它放在父样式表中？

【解决方案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/

【讨论】：

谢谢桑迪普。那么这种修改是否必须在父样式表中完成？
是的，但如果你想要单独的样式表。然后在 HTML 页面中的原始样式表之后定义您的自定义样式表。
我想使用一个子样式表。目前样式表在 header.php 中定义如下。 ' ' 你是这个意思吗？有了这个，我可以得到一些覆盖而不是其他的。

【解决方案3】：

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

以下规则就足够了。

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

【讨论】：

谢谢克里斯。这些代码来自我购买的模板。我正在尝试对子主题进行修改，这些过于具体的选择器是我在这里发帖的原因 =)