CSSの独自性をサンプルコードで分析

CSS は宣言型言語であり、DOM 内の各要素のルール スタイルを定義できます。これらの定義では、インラインなどの他のルールよりも優先されます。たとえば、次の HTML および CSS コードがある場合:

<button class="button-warning">

の CSS は、.button-warning のため、

.button-warning {
background: red;
}


button, input[type=submit] {
background: gray;
}

になります。 input[type=submit] ボタンの前に定義されています。順序関係によれば、その背景: 赤は後者の背景: 灰色によって上書きされると思います。実際には、後者が優先されます。

一部のセレクターは他のセレクターよりも具体的です。たとえば、#id セレクター は .class セレクターよりも優先されます。セレクターには、比較するとより具体的または優先されるという現象があるため、あるセレクターを別のセレクターよりも恣意的に上位に使い続けると、特異性の地獄に陥ることになります。なぜなら、建物の外には建物があり、建物の外には山があるからです。このようなコードは保守が困難です。したがって、セレクターを作成するときは、このセレクターがその機能を実現できる最低レベルであるかどうかを自問する必要があります。

以下は、高いものから低いものまで、具体性のレベルです:

1. インラインが最も高く、インラインは XHTML のスタイル内で XHTML 要素で直接使用されます。 フック (例:

<h1 style="color: #fff;">

) これは、h1 要素に「color: #fff;」のスタイル値をインライン化します。このインラインは、CSS に含まれる他の h1 定義よりも具体的です。 css ファイル内で h1 のスタイルも定義しましたが、この行はインライン定義であるため無効です。

2. 2 番目はセレクターの ID で、#p などの # 接頭辞を使用した HTML 要素の一意の識別子です。

3. 再度、セレクターのクラス 属性 と 疑似クラス (接頭辞としてドットまたは疑似クラスの が付いている .classes [属性] を含む) :ホバー :フォーカス。

4.HTML 要素と疑似要素には、:before および :after インスタンスが含まれます。

要素が上記の特殊性を複数組み合わせた場合、識別性を計算するためのスコアが高いほど優先度が高くなります。 識別性を計算するにはどうすればよいですか?

最初は 0 ポイントから開始し、インラインに 1000 ポイント、ID に 100 ポイント、クラスと疑似クラスに 10 ポイント、要素と疑似要素に 1 ポイントを追加します。

例:

body #content .data img:hover

特異性スコアは次のように計算されます。 #content は ID であるため、100 ポイントが追加されます。 .data はクラスであるため、10 ポイントが追加されます。そして、:hover は疑似クラスです。 したがって、Body は Html 要素であるため 1 点が追加され、img も Html 要素であるため 1 点が追加されます。合計スコアは 122 点です。

例: CSS は次のように定義されます:

a{ color:blue;}
p a{ color:green;}
p a.mycolor{ color:red;}

その後、HTML ルールは次のように使用されます:

<p><a href="#" class="mycolor"></a></p>

<p><a href="#" class="mycolor"></a></p>

では、最終的にはどの定義が優先されるのでしょうか、つまりフォントの色は何色でしょうか?ここには最高スコアを持つ .mycolor セレクター クラスがあり、10 ポイントが追加されるため、この単語の色は最終的に赤になることに注意してください。もちろん、

<p><a href="#" ></a></p>

などの .mycolor 定義がない場合、通常の HTML 要素 p と a が 2 つあり、スコアは 2 であるため、色は緑色になります。

そこで、特異性を計算する別の方法を示します。

1. セレクター内の ID の数、つまり #p などの数を数えます

2. セレクター内の .class クラスの数をカウントします

3. HTML 要素名と疑似要素の数をカウントします

最後に、高いものから低いものまで、1-2-3 の 3 つの順序で特殊性を定義します。

上記は CSS の独自性を分析したサンプルコードの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。