インライン スタイルの CSS の特異性の問題を克服するにはどうすればよいですか?

CSS の優先順位: 特異性の克服

指定された Web ページでは、左パディングのインライン スタイルが、参照されたスタイルシートによってオーバーライドされています。この問題は、両方のスタイルの特異性の違いにより発生します。

CSS でのルールの指定は、ルールが適用される要素を決定するセレクターによって行われます。セレクターの詳細度によって優先順位が決まり、詳細度の高いルールが低いルールよりも優先されます。

この例では、参照されるスタイルシートにルール「.rightColumn {margin: 0; padding: 0;」が含まれています。 }" とセレクター ".rightColumn "。このセレクターは、ID「rightColumn」を持つ要素内の任意の要素と一致します。この問題は、インライン スタイルの "td" のスタイルが、親要素に関係なく、テーブル セル要素に適用されるために発生します。

これを解決するには、2 つのオプションがあります:

特異性の使用:

クラスや ID など、より特異性の高いセレクターを追加して、「td」のインライン スタイルの特異性を高めます。例:

<pre class="brush:php;toolbar:false"><style type="text/css">
td#myUnpaddedTable {
    padding-left:10px;
} 
</style>

この例では、セレクター "#myUnpaddedTable" (0101) の特異性が ".rightColumn *" (0010) の特異性よりも高く、インライン スタイルがより具体的になります。

! important の使用:

インライン スタイルに「! important」を追加すると、ブラウザーはそのスタイルを他のスタイルよりも優先します。複雑なスタイルシートでは混乱を招く可能性があるため、このアプローチは避けてください。

以上がインライン スタイルの CSS の特異性の問題を克服するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。