web-dev-qa-db-ja.com

二十三十三style.cssのCSSルールを無効にする方法？

私は以下のような状況にあります。

  1. Wordpressページにチェスゲームを表示するプラグイン ChessTempoViewer を実装しました。
  2. このプラグインは、2010年、2012年、2014年のテーマではうまく機能していますが、21では機能していません。
  3. その理由はそのテーマのstyle.cssの規則です。

テーマからこれらのルールを削除するための私のオプションは何ですか？

問題の詳細

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

これにより、次のチェス盤の表示になります。

enter image description here

ページを開くとChromeでHTMLページを調べてみると、対応するCSSルールを選択解除することができます。その結果、正しい表示になります。

enter image description here

ルールの選択を解除

enter image description here

今正しく表示されます。

ただし、自分のCSSファイルにルールを追加して、そのルールを非表示にすることはできません。私は以下を試しましたが、効果はありません。

.ct-black-square
{
    background-color: #88a0a9;
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
}

.ct-white-square
{
    background-color: #fdfdfd;
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
}

テーマTwentythirteenのプラグインの動作を修正するために他にどのようなオプションがありますか？

pluginsthemescss
1
mliebelt

ボックスサイズのデフォルトの動作はcontent-boxです。これはChromeでルールを選択解除したときに適用されます。継承ではなく、自分のCSSファイルにbox-sizing：content-boxを適用してみましたか？

.ct-black-square
{
    background-color: #88a0a9;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

.ct-white-square
{
    background-color: #fdfdfd;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

ボックスサイズ

1
Mars