!important を上書きするには? 質問する

!important を上書きするには? 質問する

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

td {height: 100px !important}

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

ベストアンサー1

!important 修飾子のオーバーライド

  1. で別のCSSルールを追加し!important、セレクタの詳細度を高めます(セレクタにタグ、ID、またはクラスを追加します)。
  2. 既存のものよりも後の時点で同じセレクターを持つ CSS ルールを追加します (同点の場合は、最後に定義されたものが優先されます)。

より詳細度の高い例をいくつか示します (1 番目が最高/オーバーライド、3 番目が最低):

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

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

td {height: 50px !important;}

免責事項:

を使用することは、ほとんどの場合、良い考えではありません!important。これは、WordPress テンプレートの作成者による不適切なエンジニアリングです。これは、テンプレートのユーザーに、!importantそれを上書きするための独自の修飾子を追加することを強制し、JavaScript 経由でそれを上書きするオプションを制限します。

しかし、場合によってはそれを上書きする方法を知っておくと便利です。

おすすめ記事