CSSとの競合は何ですか?

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

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

CSS の競合と解決

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

1. 優先順位の原則

2. 最近の原則

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

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

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

…

では、

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

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

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

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

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

関連ラベル：

css 対立

ソース：php.cn

前の記事：CSSでハイパーリンクの下の水平線を削除する方法 次の記事：CSSで特定のブロックを固定するように設定する方法

このウェブサイトの声明

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

著者別の最新記事

• インターフェース設計書を共有する際の12の注意点
  2023-04-24 11:00:01
• フロントエンドがバッテリー情報を取得する方法について話しましょう
  2023-04-24 10:55:51
• Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明
  2023-04-24 10:52:44
• 8 つのデモを使用して Go 言語の defer の 5 つの主要な機能を理解する
  2023-04-23 17:40:51
• file_get_contents と getimagesize の時間のかかる深刻な問題の詳細な説明
  2023-04-23 17:38:02
• PHP 無料確認コードを共有する (コード付き)
  2023-04-23 17:34:02
• Linux での yum の意味
  2023-04-23 10:15:45
• Linux jbossとは何ですか
  2023-04-23 10:10:52
• Redis の多次元ランキングのアイデアを共有する
  2023-04-21 16:01:59
• ある記事では、php+roadrunner による grpc サーバーの実装について詳しく説明しています。
  2023-04-21 15:58:01

最新の問題

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1335

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...

から 2024-04-06 20:57:16

0

1

487

CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...

から 2024-04-06 20:45:26

0

2

386

他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...

から 2024-04-06 20:41:51

0

1

518

関連トピック

詳細>

• css
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法
• CSSで文字の色を設定する