重要なオーバーライド方法は？

Wordpressテンプレートの元のCSSを上書きするカスタムスタイルシートを作成しました。しかし、私のカレンダーページでは、元のCSSには次の!important宣言で設定された各テーブルセルの高さがあります。

td {height: 100px !important}

これを上書きできる方法はありますか？

重要な修飾子のオーバーライド

1. を使用して別のCSSルールを追加し!important、セレクターに高い特異性を与える（セレクターにタグ、ID、またはクラスを追加する）
2. 既存のセレクターよりも後の時点で同じセレクターを使用してCSSルールを追加します（同点では、最後に定義されたものが優先されます）。

より高い特異性を持ついくつかの例（最初が最も高い/オーバーライド、3番目が最も低い）：

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

または、既存のセレクターの後に同じセレクターを追加します。

td {height: 50px !important;}

免責事項：

を使用することはほとんど決して良い考えではありません!important。これは、WordPressテンプレートの作成者による悪いエンジニアリングです。バイラルスタイルで、テンプレートのユーザーは独自のテンプレートを追加する必要があります!important修飾子をてオーバーライドするし、JavaScriptを介してオーバーライドするためのオプションを制限します。

ただし、必要に応じてオーバーライドする方法を知っておくと便利です。

!importantあなたは矛盾であなたのスタイルシートのセレクタがある場合にのみ使用すべきである特異性を。

ただし、特定性が競合している場合でも、例外に対してより具体的なセレクターを作成することをお勧めします。あなたの場合class、!importantルールを必要としないより具体的なセレクターを作成するために使用できるをHTMLに含める方が良いでしょう。

td.a-semantic-class-name { height: 100px; }

私!importantは自分のスタイルシートで使用することはありません。CSSのCはカスケード用であることを忘れないでください。を使用!importantすると、これが壊れます。

免責事項：重要なことは絶対に避けてください。

これはダーティでダーティなハックですが、重要性をオーバーライドしようとしているプロパティで（無限ループまたは非常に長時間続く）アニメーションを使用することで、！importantなしで！importantをオーバーライドできます。

@keyframes forceYellow {
  from {
    background-color: yellow;
  }
  to {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: red !important;
  animation: 1s linear infinite forceYellow;
}

<div></div>

では、CSSの重要性について簡単に説明します。以下がお役に立てば幸いです！

まず、スタイルのすべての部分は重み付けとして名前が付けられているため、そのスタイルに関連する要素が多いほど、重要度が高くなります。例えば

#P1 .Page {height:100px;}

よりも重要です：

.Page {height:100px;}

したがって、重要な場合、理想的には、これは本当に本当に必要なときにのみ使用する必要があります。したがって、declerationをオーバーライドするには、スタイルをより具体的にしますが、オーバーライドも行います。下記参照：

td {width:100px !important;}
table tr td .override {width:150px !important;}

これが役に立てば幸いです!!!

JavaScriptを使用して上書き

$('.mytable td').attr('style', 'display: none !important');

私のために働いた。

これも役立ちます

td[style] {height: 50px !important;}

これはすべてのインラインスタイルをオーバーライドします

いずれにせよ、あなたは無効にすることができheightてmax-height。

上記のすべてを試してみたが役に立たなかったので、ここでは言及されていない答えを追加したいと思います。私の特定の状況は、!important要素に属性が組み込まれている（非常に迷惑な）semantic-uiを使用している場合です。私はそれをオーバーライドするためにすべてを試しましたが、結局のところ（jqueryを使用して）1つのことを行いました。以下のとおりです。

$('.active').css('cssText', 'border-radius: 0px !important');