CSS スタイルの優先順位_html/css_WEB-ITnose

CSS スタイルの優先順位

作成されるスタイル シートがますます複雑になるにつれて、タグのスタイルは周囲のタグやタグそのものから影響を受ける可能性がますます大きくなります。これら 2 つの側面から CSS スタイルの優先順位を見てみましょう。

CSS の継承

CSS の継承機能とは、タグに適用された CSS プロパティがそのインライン タグに渡されることを意味します。次の HTML 構造を見てください:

<div>    <p></p></div>

dc6dce4a544fdca2df29d5ac0ea9906b に color: red がある場合、この属性は e388a4556c0f65e1904146cc1a846bee によって継承されます。つまり、e388a4556c0f65e1904146cc1a846bee にも color: red が設定されます。

上記のことから、Web ページがより複雑で HTML 構造が深くネストされている場合、タグのスタイルはその祖先タグのスタイルに深く影響されることがわかります。影響を受けるルールは次のとおりです:

CSS 優先ルール 1: 最近の祖先スタイルは、他の祖先スタイルよりも優先されます。

例 1:

<!-- 类名为 son 的 div 的 color 为 blue --><div style="color: red">    <div style="color: blue">        <div class="son"></div>    </div></div>

タグが祖先から継承するがそれ自体を持たない属性を「祖先スタイル」と呼ぶ場合、「直接スタイル」はタグが直接持つ属性です。以下のルールもあります:

CSS 優先ルール 2: 「直接スタイル」は「祖先スタイル」よりも優先されます。

例 2:

<!-- 类名为 son 的 div 的 color 为 blue --><div style="color: red">    <div class="son" style="color: blue"></div></div>

selector の優先順位

上記では、タグがその祖先から継承する属性について説明しました。ここで、タグ自体の属性について説明します。同じ属性が複数適用されているタグに遭遇することがあります。同時に属性を設定する必要があるため、これらの属性の優先順位を決定する必要があります。以下のルールがあります:

CSSの優先順位ルール3:

優先関係: インラインスタイル > IDセレクター > クラスセレクター > タグセレクター このうち、::first-line などの疑似要素は次のように扱われます。タグセレクター; :link などの疑似クラスはクラスとして扱われます。

例 3:

// HTML<div class="content-class" id="content-id" style="color: black"></div>// CSS#content-id {    color: red;}.content-class {    color: blue;}div {    color: grey;}<div> 最终的 color 为 black，因为内联样式比其他选择器的优先级高。

しかし、セレクターが複数の ID セレクター、クラス セレクター、ラベル セレクターで構成されていることがよくあります。以下のルールがあります:

CSS優先順位ルール4: CSSセレクターが複数のIDセレクター、クラスセレクター、またはタグセレクターで構成される場合、IDセレクターの数を比較し、どちらか大きい方が優先されます。高; 番号が同じ場合は、クラス セレクターを再度比較し、番号が大きい方が優先されます。同じである場合は、ラベル セレクターを再度比較し、番号が大きい方が優先されます。それらが同じ場合は、高優先度の下にあるもの。

例 4:

// HTML<div id="con-id">    <span class="con-span"></span></div>// CSS#con-id span {    color: red;}div .con-span {    color: blue;}由规则 4 可见，<span> 的 color 为 red。

外部スタイル シートと内部スタイル シートのスタイルが競合した場合はどうなりますか?これは、HTML ファイル内でスタイル シートが配置される場所に関係します。スタイルが適用される位置が低いほど、優先度は高くなります。実際、これはルール 4 によって説明できます。

例 5:

// HTML<link rel="stylesheet" type="text/css" href="style-link.css"><style type="text/css">@import url(style-import.css); div {    background: blue;}</style><div></div>// style-link.cssdiv {    background: lime;}// style-import.cssdiv {    background: grey;}从顺序上看，内部样式在最下面，被最晚引用，所以 <div> 的背景色为 blue。

上記のコードでは、@import ステートメントを内部スタイルの前に指定する必要があります。そうしないと、ファイルの導入が無効になります。もちろん、@import を使用して外部スタイル ファイルを参照することはお勧めできません。その理由については、別のブログを参照してください。

CSS は、特定の属性を表示する必要がある場合に、上記のルールを完全に無視する方法も提供します。

CSS 優先順位ルール 5:

! important が後に挿入された属性が最も高い優先順位を持ちます。 ! important が同時に挿入された場合、ルール 3 と 4 が優先順位の決定に使用されます。

例 6:

// HTML<div class="father">    <p class="son"></p></div>// CSSp {    background: red !important;}.father .son {    background: blue;}虽然 .father .son 拥有更高的权值，但选择器 p 中的 background 属性被插入了 !important，所以 <p> 的 background 为 red。

間違ったステートメント

学習プロセス中に、セレクターの重みが 100、クラス セレクターの重みが 10、ラベル セレクターの重みが 100 であることがわかるかもしれません。は 1 です。セレクターが複数の ID セレクター、クラス セレクター、またはラベル セレクターで構成される場合、すべての値が加算されて重みが比較されます。この発言には実は問題がある。たとえば、11 個のクラス セレクターで構成されるセレクターと 1 個の ID セレクターで構成されるセレクターは、論理的には 110 > 100 であるため、前者のスタイルが適用されるはずですが、実際には後者のスタイルを指します。エラーの理由は次のとおりです:

セレクターの重量に耐えることができません

。