css_html/css_WEB-ITnose の重みを深く理解する

セレクターの重み値の計算

A: タグのstyle属性(インラインスタイル)にルールが記述されている場合はA=1、それ以外の場合はA=0となります。インラインスタイルの場合はセレクターがないため、したがって、B、C、Dの値はいずれも0、つまりA=1、B=0、C=0、D=0（1,0,0,0と略す、以下同じ）となる。 。

B: このセレクター内の ID の数を数えます。 (たとえば、#header のようなセレクターは 0、1、0、0 と評価されます)。

C: セレクター内の疑似クラスとその他の属性の数を計算します (クラス セレクター、属性セレクターなどを含み、疑似要素を除きます) 。 (たとえば、.logo[id='site-logo'] のようなセレクターは 0、0、2、0 と評価されます)。

D: このセレクター内の疑似要素とラベルの数を数えます。 (たとえば、p:first-letter のようなセレクターは 0、0、0、2 と評価されます)。

CSS2 仕様で示されているいくつかの例:

* {}              /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */li {}             /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul li {}          /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ul ol+li {}       /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ul ol li.red {}   /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */li.red.level {}   /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */#x34y {}          /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

この定義によれば、多くの記事では単にルールを次のように要約しています: インライン スタイルの重み値は 1000、ID セレクターの重み値は 100、クラス セレクターの重み値は 10、ラベル セレクターの重み値は 1 です。ルール全体のすべてのセレクターの重み値が加算されて、スタイル ルール全体の重み値が取得されます。数値が大きいほど、重みは高くなります。価値。

ほとんどの場合、この理解に基づく結論に問題はありませんが、次の状況に遭遇した場合に問題が発生します。スタイル 2 の値は 11 です。重みの値は 10 です。これら 2 つのルールが同じ要素に適用される場合、要素は赤になるはずです。実際の結果は青です。

ウェイト値の比較

4 セットの計算の正しい方法によれば、上記の例のスタイル 1 のウェイト値は 0、0、0、11 になるはずで、スタイル 2 のウェイト値は 0、0 になります。 、1、0。

仕様によると、重みの値を計算するとき、

A、B、C、D の 4 つの値を左から右にグループで比較し、A が同じ場合は B を比較し、B が同じ場合は比較します。 、C を比較、C が同じ場合は D を比較、D が同じ場合は、後で定義したものが優先されます。

スタイル 2 の A と B はスタイル 1 の A と B と同じですが、スタイル 2 の C はスタイル 1 のそれより大きいため、D の値に関係なく、スタイル 2 の重みの値が大きくなります。スタイル 1 よりも。これが正解です。

特別な!重要

スタイルを定義する際に、ABCDの4つのグループに従って計算および比較するだけでなく、特定の属性に!重要を適用することもできます。 、特別な注意が必要です ここでの「!」は、プログラミング言語では逆の意味を持ち、「

重要ではない

」という意味ではなく、「非常に重要です」という意味です。 CSS2 仕様では、次のように規定されています: ! important は、特定のスタイルの単一の属性を

個別に指定する

ために使用されます。指定された属性について、 ! important で指定された重み値は、 ! important で指定されていないすべてのルールよりも大きくなります。 例:

/* 样式一 */body header div nav ul li div p a span em {color: red} /* 样式二 */count {color: blue}

ルール全体で、スタイル 1 のウェイト値は 0、1、1、3 ですが、スタイル 2 のウェイト値は 0、0、0、2 のみです。したがって、同じ要素に適用すると、スタイルが有効になるはずです。ただし、color 属性については、スタイル 2 で ! important で指定されているため、color はスタイル 2 の規則が適用されます。また、font-weight は指定どおりにスタイル 1 のルールを使用します。

複数のルールで同じ属性に ! important が指定されている場合はどうなりますか?このとき、! important の効果は互いに打ち消し合い、ABCD の 4 つのグループに従って計算と比較が行われます。

したがって、 ! important の関数は、一意である場合にのみ取り消すことができますが、 ! important で指定された属性をいつオーバーライドする必要があるかは予測できません。そのため、最善の方法は、 ! を使用しないことです。重要です。

継承について

要素に直接割り当てられるスタイル ルールに加えて、各属性値には可能な継承値もあります。要素の style 属性が親要素から継承され、親要素の定義と一致していることを示します。例:

/* 样式一 */#header nav ul li.current {color: red; font-weight: bold;} /* 样式二 */li:hover {color: blue !important; font-weight: normal;}

上記の例では、スタイル ルールで spam タグの color 属性が指定されていませんが、span 内のテキストは赤色で表示されます。これは、span の color 属性のデフォルト値が設定されているためです。

継承の属性については、次のことを覚えておいてください。継承された属性値は、要素の定義に明示的に割り当てられた値よりも常に小さい重みを持ちます。要素の属性が直接指定されていない場合に限り、親要素の値が継承されます。例:

<style>  .list .item { color: red } </style><ul class="list">    <li class="item">        <span>某些文字</span>    </li></ul>

同じ例では、最初のルールの重みは 0,0,0,1 で、2 番目のルールの重みは 0,0,2,0 ですが、2 番目のルールの重みが高くなります。これはspan要素には定義されておらず、li要素に直接指定されているため、spanのcolor属性の重み値を計算する際、実際にはinheritの赤と直接指定した青のコントラストとなります。ルール上、直接指定した値（青）がある限り、継承した値（赤）は取られないので、span内の文字は青で表示されます。

这条规则最典型的场景就是链接文字的颜色。由于一般浏览器自带的样式表都有针对 a 标签的颜色及下划线的直接指定，所以网页样式表中对 a 标签的父级元素指定 color 属性及 text-decoration 属性，通常不会起作用。但是我们可以通过下面的 reset 来改变这一点：

<style>    a { color: inherit; text-decoration: inherit }    .item { color:red }</style><p class="item"><a href="#">链接文字</a></p>

在上例中，由于我们的样式表对 a 标签直接指定了 color 和 text-decoration 属性值， 覆盖了浏览器的默认样式，所以在没有特别指定 a 标签的颜色和下划线定义的前提下， 会从父级元素 p 继承，因此链接会显示为红色（有补充）。

特别补充：inherit 在 CSS1 规范中并未定义，所以 IE6, IE7 以及 IE8 的 QuirksMode 不支持。

总结

一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];

A 表示内联样式，只有 1 或者 0 两个值；

B 表示规则中 ID 的数量；

C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量；

D 表示规则中标签和伪元素的数量；

比较时从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位；

有 !important 标记的属性权重值无视没用 !important 指定的一切情况；

多次指定 !important 时，相互抵销。

inherit 而来的属性定义，优先级低于任何直接指定的属性值。