310

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

td {height: 100px !important}

これをオーバーライドする方法はありますか？

4

9 に答える 9

439

！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を介してテンプレートをオーバーライドするためのオプションを制限します。

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

于 2012-06-24T15:36:46.427 に答える
34

style属性によって設定されたスタイルをオーバーライドすることは別として、は、スタイルシートに競合する特異性!importantを持つセレクターがある場合にのみ使用する必要があります。

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

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

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

于 2012-09-17T09:12:22.437 に答える
23

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

これは汚い、汚いハックですが、重要なものをオーバーライドしようとしているプロパティで（無限にループする、または非常に長く続く）アニメーションを使用することで、！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>

于 2017-12-14T00:47:26.713 に答える
19

さて、ここにCSSの重要性についての簡単なレッスンがあります。以下がお役に立てば幸いです。

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

#P1 .Page {height:100px;}

より重要です：

.Page {height:100px;}

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

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

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

于 2014-05-18T19:12:44.070 に答える
13

JavaScriptを使用してオーバーライド

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

私のために働いた。

于 2014-10-09T11:01:42.270 に答える
6

これも役立ちます

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

これにより、インラインスタイルが上書きされます

于 2016-08-31T14:02:03.817 に答える
3

いずれの場合も、でオーバーライドできheightますmax-height。

于 2019-12-05T22:04:22.190 に答える
2

セレクターを上げることで、より高い特異性を使用できます。

td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}

cssをオーバーライドする方法の詳細な記事はここで確認できます。

于 2021-10-17T06:31:59.397 に答える
-4

私は上記のすべてを無駄に試したので、言及されていないこれに答えを追加したいと思います。私の特定の状況は、!important要素に属性が組み込まれているセマンティックUIを使用していることです（非常に煩わしい）。私はそれをオーバーライドするためにすべてを試しましたが、最終的には1つのことが機能しました（jqueryを使用）。それは次のとおりです。

$('.active').css('cssText', 'border-radius: 0px !important');
于 2016-10-26T13:25:31.570 に答える