CSS で `! important` 修飾子をオーバーライドするにはどうすればよいですか?

CSS で ! important 修飾子をオーバーライドする

CSS では、! important 宣言は、特定のスタイル ルールが次のことを行う必要があることを指定するために使用されます。同じ要素に適用される他のすべてのルールよりも優先されます。これは特定の状況では便利ですが、スタイルシートの保守が困難になる可能性があるため、使用は控え目にする必要があります。

! important 宣言をオーバーライドする必要がある一般的なシナリオの 1 つは、カスタム宣言を作成するときです。 WordPress テンプレートの元の CSS をオーバーライドするスタイル シート。ただし、元の CSS では、! important 宣言を使用して各テーブル セルの高さを設定している可能性があります。

! important 宣言をオーバーライドするには、次の 2 つの方法があります。

1. ! important を使用して別の CSS ルールを追加し、セレクターに高い特異性を与えます。 特異性は、CSS セレクターが特定のオブジェクトに対してどの程度具体的であるかを示す尺度です。 要素。セレクターが具体的であればあるほど、その特異性は高くなります。セレクターに追加のタグ、ID、またはクラスを追加することで、セレクターの特異性を高めることができます。たとえば、次のルールは、より高い特異性を持つため、元のルールをオーバーライドします。

table td {height: 50px !important;}

2. 同じセレクターを持つ CSS ルールを、 同点の場合は、最後に定義されたルールが勝ちます。たとえば、次のルールは元のルールの後に定義されているため、元のルールをオーバーライドします:

td {height: 50px !important;}

免責事項: ! important を使用することは、ほとんどの場合良い考えではありません。 。これは、WordPress テンプレートの作成者による不適切なエンジニアリングです。流行的には、テンプレートをオーバーライドするためにテンプレートのユーザーに独自の ! important 修飾子を追加することが強制され、JavaScript を介してテンプレートをオーバーライドするためのオプションが制限されます。ただし、場合によってはオーバーライドする方法を知っておくと便利です。

以上がCSS で `! important` 修飾子をオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。