CSSセレクター：特異性

次の抜粋は、ティファニー・B・ブラウンによって書かれた本「CSSマスター」からのものです。この本は世界中の店舗で入手できます。また、ここで電子書籍バージョンを購入することもできます。

CSS特異性により、最終的に要素に適用されるスタイル宣言が決定されます。 WildCardセレクター（*）の特異性が最も低く、IDセレクターの特異性が最も高くなっています。子孫セレクター（例：p img）とサブセレクター（例：.panel＆gt; h2）は、型セレクター（p、img、またはh1など）よりも具体的です。

一見すると、正確な特異性値の計算が難しいと思われます。セレクターレベル3に記載されているように、

が必要です

• 統計セレクター内のIDセレクターの数（= a）
• 統計セレクターのクラスセレクターの数、属性セレクター、および擬似クラスの数（= b）
• 統計セレクターのタイプセレクターと擬似要素の数（= c）
• ワイルドカードセレクターを無視してください

これらのa、b、およびc値を組み合わせて、最終的な特定の値を形成します。たとえば、IDセレクター#FOOの特異性は1,0,0です。属性セレクター（[type = email]）とクラスセレクター（例えば.chart）の特異性は0,1,0です。擬似クラス（例：初代、例えば、chart：first-child）を追加すると、特異性が0,2,0になります。ただし、単純なタイプまたは要素セレクター（H1またはPなど）を使用すると、特異性が0,0,1のみになります。

注：特異性を計算

Keegan Streetの特異性計算機とJoshua PeekのCSSは、セレクターの特異性の学習と計算ヘルプを説明します。

もちろん、複雑なセレクターと組み合わせセレクターは、より高い特異性値を生成します。例を見てみましょう。次のCSSを検討してください：

<code>ul#story-list > .book-review {
    color: #0c0;
}

#story-list > .book-review {
    color: #f60;
}</code>

これらの2つのルールセットは似ていますが、同じではありません。最初のセレクター、UL＃STORY-LIST＆GT; .BookReviewには、型セレクター（UL）、IDセレクター（＃Story-List）、およびクラスセレクター（.BookReview）が含まれています。その特異性値は1,1,1です。 2番目のセレクター＃Story-List＆GT;その特異性値は1,1,0です。 ＃Story-List＆GT; 。

：linkまたは：nivalidなどのpseudoclassesは、クラスセレクターと同じレベルの特異性を持っています。 a：linkとa.externalの特異性値は両方とも0,1,1です。同様に、:: :: befforeおよび:: aftherなどの擬似要素は、タイプまたは要素セレクターと同じくらい具体的です。 2つのセレクターの特異性が同じ場合、カスケードが有効になります。例は次のとおりです。

<code>a:link {
    color: #369;
}
a.external {
    color: #f60;
}</code>

このCSSを適用すると、.Externalクラスを適用するリンクを除き、すべてのリンクはスレートブルーになります。これらのリンクはオレンジに変更されます。

特異性が低いことは、セレクターの拡散を防ぐのに役立ちます。つまり、セレクターの特異性と長さが時間とともに増加する傾向です。これは通常、チームに新しい開発者を追加したり、ウェブサイトに新しいコンテンツフォームを追加したりすると発生します。セレクターの拡散は、長期的なメンテナンスの困難にもつながる可能性があります。より具体的なセレクターを使用して他のルールセットを上書きするか、コードをリファクタリングする必要があります。セレクターが長くなると、CSSファイルの重みも増加します。

第2章で特異性を低く保つための戦略について説明します。

結論

この章を読んだ後、CSSセレクターをよく理解する必要があります。具体的には、方法を知っておく必要があります

セレクターを使用して特定の要素、擬似要素、および擬似クラスにCSSを適用します

• 擬似要素と擬似クラスの違いを理解してください
• セレクターレベル3および4仕様で導入された新しい擬似クラスを使用してください
• 計算特異性
次の章では、保守可能で拡張可能なCSSを書くためのゴールデンルールのいくつかを紹介します。

CSSセレクターと特異性（FAQ）

に関するよくある質問

Web開発におけるCSS特異性の重要性は何ですか？

CSS特異性は、ブラウザが適用するCSSルールを決定するため、Web開発の重要な概念です。複数のCSSルールを要素に適用できる場合、ブラウザは特定のルールに従って使用するルールを決定します。 CSSの特異性を理解することは、開発者がより効率的で効率的なCSSコードを書き、不必要なオーバーライドを回避し、CSSの問題をより効果的にトラブルシューティングするのに役立ちます。

CSS特異性を計算する方法は？

CSS特異性の計算は、CSSルールで使用されるさまざまなタイプのセレクターに基づいています。各タイプのセレクターの特異性値は異なります。インラインスタイルの特異性が最も高く、その後にIDセレクター、クラスセレクター、属性セレクター、および擬似クラスが続き、最後にセレクターと擬似エレメントを型が付いています。 CSSルールの特異性は、そのセレクター固有の値の合計です。

CSS特異性の概念を例で説明できますか？

例を考えてみましょう。クラスセレクター.class1を使用したCSSルールとIDセレクター＃id1を使用した別のルールがあるとします。これらの2つのルールを同じ要素に適用できる場合、IDセレクターはクラスセレクターよりも特異性が高いため、IDセレクターを備えたルールが適用されます。

2つのCSSルールが同じ特異性を持っている場合はどうなりますか？

2つのCSSルールが同じ特異性を持っている場合、CSSコードに表示される最後のルールが適用されます。これは、CSSが同じ特異性を持つルールを扱う際に「最後のルール勝利」戦略に従うためです。

CSS特異性をカバーする方法は？

CSSルールの特異性を高めることにより、CSSの特異性をオーバーライドできます。これは、ルールにより具体的なセレクターを追加することで実行できます。 CSS特異性をオーバーライドする別の方法は、重要なルールを使用することです。ただし、CSSコードを管理してデバッグするのがより困難になるため、可能な限り重要なことを避ける必要があります。

CSS特異性における相続の役割は何ですか？

継承は、特定のタイプの属性が親要素からその子要素に自動的に渡されるCSSの機能です。ただし、継承されたスタイルは特異性が最も低く、要素に適用される直接的なスタイルによって簡単に上書きできます。

ワイルドカードセレクターはCSS特異性にどのように影響しますか？

WildCardセレクター（*）は、CSS特異性に影響を与えません。これは、その特異性値が0,0,0,0であることを意味します。したがって、同じルールで使用される他のセレクターは、ワイルドカードセレクターをオーバーライドします。

CSSの擬似要素の特異性は何ですか？

CSSの擬似要素の特異性は0,0,0,1です。これは、タイプセレクター（Div、Pなど）と同じ特異性を持ち、クラスセレクター、IDセレクター、インラインスタイルによってオーバーライドされることを意味します。

：not（）擬似クラスはCSS特異性にどのように影響しますか？

：not（）cssの擬似クラスは、セレクターの特異性を向上させません。代わりに、特定の計算は、not（）関数に渡されるパラメーターに基づいています。たとえば、in：not（.class1）、特異性は.class1と同じです。

単一のCSSルールで複数のセレクターを使用できますか？特異性にどのように影響しますか？

はい、単一のCSSルールで複数のセレクターを使用できます。このようなルールの特異性は、すべてのセレクターの特異性の合計です。たとえば、＃id1.class1では、特異性は＃id1および.class1特異性の合計です。

以上がCSSセレクター：特異性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。