複数のスタイルが同じ要素に適用される場合、CSS の優先順位の競合を解決するにはどうすればよいですか?

CSS の優先順位: CSS スタイル設定の競合を解決する

Web ページのスタイルを定義する場合、望ましいスタイルの結果を確実に得るために CSS の優先順位の概念を理解することが不可欠です。複数の CSS 宣言が同じ要素に適用される場合、優先ルールによって、どのルールが他のルールをオーバーライドするかが決まります。

特異性の問題

次のシナリオを考えてみましょう。

<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
td {
    padding-left:10px;
} 
</style>

この例では、td 要素のインライン スタイル (padding-left:10px; を指定) が、コードの後半に表示されているにもかかわらず、無視されているようです。 Firebug などの開発ツールを使用して Web ページを検査すると、参照されたスタイルシートに次のものが含まれていることがわかります。

.rightColumn * {margin: 0; padding: 0;}

参照されたスタイルシートのルール .rightColumn * が #rightColumn 要素内の td 要素に適用され、インライン スタイルをオーバーライドするために競合が発生します。 .

特異性ルールについて

CSS 特異性ルールは、CSS 宣言の優先順位を決定します。これらのルールは、セレクターの数とその特異性に基づいて、各宣言に数値を割り当てます。より高い具体性の値を持つ宣言が優先されます。

この場合、参照されるスタイルシート ルール .rightColumn * にはより多くのセレクターがあるため、td のインライン スタイルよりも高い具体性があります。

解決優先順位の競合

このような競合を解決するには、主に 2 つのアプローチがあります。

1. 詳細度の増加: セレクターを追加して、目的のルールに高い詳細度を割り当てます。クラスやIDなど。例: #rightColumn td {padding-left:10px;
2. ! important の使用: ! important 宣言を使用して、他の CSS 宣言をオーバーライドできます。ただし、このアプローチは、CSS ルールの維持と理解が困難になる可能性があるため、慎重に使用する必要があります。

提供された例では、最良の解決策は、td のインライン スタイルの特異性を高めることです。クラスまたは ID を追加します:

<table class="mySpecialTable">
  <tr>
    <td style="padding-left:10px;">Example data</td>
  </tr>
</table>

この変更により、クラス mySpecialTable を持つテーブル内の td 要素のインライン スタイルが、参照されるスタイルシート内の競合するルールをオーバーライドします。

以上が複数のスタイルが同じ要素に適用される場合、CSS の優先順位の競合を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。