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。

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

スタイル 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>

这条规则最典型的场景就是链接文字的颜色。由于一般浏览器自带的样式表都有针对 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 而来的属性定义，优先级低于任何直接指定的属性值。