ホームページ  >  記事  >  ウェブフロントエンド  >  CSSとの競合は何ですか?

CSSとの競合は何ですか?

藏色散人
藏色散人オリジナル
2021-03-22 15:19:162695ブラウズ

CSS の競合とは、複数の CSS スタイルが同じ要素に適用される場合、これらのスタイル間で同じ属性の書式設定が異なる可能性があることを意味します。競合が発生すると、ブラウザは優先原則または最新の原則に従います。 CSS の競合問題を解決します。

CSSとの競合は何ですか?

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

CSS の競合と解決

複数の CSS スタイルが同じ要素に適用される場合、これらのスタイル間で同じ属性の書式設定が異なる場合があります。競合が発生した場合、ブラウザは次の原則に従って CSS の競合を解決します。

1. 優先順位の原則

2. 最近の原則

3. 同じ属性のスタイル定義の場合、後で定義されたスタイルは以前に定義されたスタイルを上書きします。

優先順位の原則: 最も優先度の高いスタイルが有効であることを意味します。このうち、インライン スタイル > インライン スタイル | リンク外部スタイル、つまりインライン スタイルが最も優先され、インライン スタイルとリンク外部スタイルが優先されます。スタイルの優先順位は出現位置によって決まり、後から出現した方が優先されます。同じタイプのスタイルでも、セレクター間には異なる優先順位があり、セレクターの優先順位は次のように指定されます: ID セレクター>クラス セレクター|擬似クラス セレクター|属性セレクター>要素セレクター|擬似要素セレクター > ワイルドカード セレクター | 子要素selector | 隣接する兄弟セレクター、つまり ID セレクターが最も高い優先順位を持ちます。

最新の原則: 主に継承されたスタイル用で、書式設定された要素の親クラスのスタイルに近いほど優先度が高くなります。例:

では、

タグのスタイルを設定すると、その優先順位は

タグのスタイルよりも高くなります。

さらに、スタイルの後に ! important を追加すると、スタイルの優先順位を最高レベル (インライン スタイルよりも高い) に上げることができます。

[推奨学習: css ビデオ チュートリアル]

以上がCSSとの競合は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。