css - 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

1 つには、CSS ルールが過度に具体的です。AnIDは、使用できる最も具体的なdivセレクターであるため、追加または指定して親を修飾する必要はありませんID。

次のルールで十分です。

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