web-dev-qa-db-ja.com

プラグインスタイルの衝突、どのように上書きするには？

私のクライアントはこれら2つのプラグインを使用しています： - オールインワンボタン - 創世記デザインパレット

この例のページ http://bsc.mustor.com/testing-buttons/ をチェックすると、ボタン上の時間のテキストがあずき色であり、赤（ホバー）白いはずです。

創世記デザインパレットによって挿入されたスタイルシートは、オールインワンボタンとテーマスタイルをオーバーライドしています。これはオールインワンボタンのstyle.cssとテーマのstyle.cssにもかかわらず、どちらも問題の要素aio-orangeを特に参照しています。 Genesis Design Paletteのスタイルは、エントリーコンテンツに適用されるより一般的なスタイルでオーバーライドされます。

この状況で正しいスタイルをどのように優先させることができますか？

ありがとう

pluginsthemesstylesheetstyles
1
sammond

オールインワンボタン/ css/display.css？ver = 4.1.1のaio-orangeボタンの定義に#FFFの後に！importantを追加します。

色は上書きされます。最初にAIOスタイルをロードした後、ボタンスタイルを上書きするかどうかにかかわらず、他のスタイルをロードしたためです。 ！importantを使用すると、最新の定義ではありませんが、ブラウザにそのブラウザを使用するように指示できます。

だからそれはのようになります

a.aio-orange, a.aio-orange:link, a.aio-orange:hover, a.aio-orange:visited, a.aio-orange:active, a.aio-orange:focus {
color: #FFF !important;
}

それとも何か。

1
jimihenrik

理想的には、これらのプラグインのうちの1つに、CSSファイルを最後または最初に読み込むオプションがあります。 AIOボタンを最後にロードしたいと思うでしょう。

それ以外の場合は、jimihenrikが提案したようにCSSクラスを「！important」として必要な色で編集できますが、これは長期的な解決策にはお勧めできません。

あるいは、より詳細なものにすることで、Genesis Design Paletteのスタイルから問題のあるCSSスタイルを上書きすることもできます。その場合は、CSSルールが適用されます。

より具体的であることの例：彼らのコードは言う：

body.gppro-custom .content > .entry .entry-content a { color: maroon; }

あなたのコードは、CSSルールをより具体的にすることでそれを上書きすることができます。

body .content > .entry .entry-content .aio-button-center a { color: white; }

これにより、.entry-content内のすべての.aio-button-centerリンクが白に変わります。テーマのカスタムCSSのように、これを自分の任意のCSSファイルに配置できます。

詳細については、CSS固有性に関するこの楽しい記事を読んでください。 https://css-tricks.com/specifics-on-css-specificity/

0
Sean Grant