CSSセレクター：特異性-CSSチュートリアル-php.cn

結論

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

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

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

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

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

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

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

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

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

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSセレクター：特異性

Joseph Gordon-Levitt

Feb 19, 2025 am 11:20 AM

CSS Selectors: Specificity

次の抜粋は、ティファニー・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章で特異性を低く保つための戦略について説明します。