CSSの「特異性」とはどういう意味ですか？

CSSは、数値スケールを使用してセレクターの能力を決定します。パワー。どちらが最も強いか、言い換えれば、どのセレクターが最も高い特異性を持っているか。 特異性の数値が最も高いセレクターは、他の弱いセレクターによってHTML要素に適用されたスタイルに関係なく、常にHTML要素の外観を決定します。

ボタン要素がある場合、それにスタイルを適用する方法はたくさんあります。 CSSで一般的に使用される3つのセレクターは、typeです。 、class 、id 。

タイプセレクターを使用して要素のスタイルを直接設定できます：

button {
  background-color: red;
}

クラス属性を使用できます：

.button {
  background-color: red;
}

またはid属性：

#button {
  background-color: red;
}

各セレクターの数値は1です。

したがって、上記のすべてのCSSセレクター（type、class、id）が同じ値（1）を持っている場合、同じスタイルシートで使用すると、上記のルールセットのどれが優先されますか？

IDが勝ちます（#button ）IDはクラスおよびタイプセレクターよりも優先されるためです。

IDが含まれていない場合はどうなりますか？

次に、クラスセレクター（.button ）クラスがタイプセレクターよりも優先されるため、勝ちます。

待って、CSSの「カスケード」（CSS =カスケードスタイルシート）はどうですか？

CSSでは、すべてが等しい場合 、スタイルシートの最後に適用されたセレクターが勝ちます。

同じ名前の3つのクラスを追加するとします。 （.hero-button 、）スタイルシートで。各クラスは同じスタイリングプロパティ（background-color）を対象としています ）、ただし、各クラスには異なるプロパティ値があります 、この場合、それぞれ緑、青、赤。

.hero-button {
	background-color: green;
}

.hero-button {
		background-color: blue;
}

.hero-button {
	background-color: red;
}

次に、3つすべてを同じHTML要素に適用します。

<button class="hero-button">Button</button>

最後の.hero-button スタイルシートのクラスは、同じクラス名を持つ以前のクラスよりも優先され、ボタンの背景色が赤になります。これがCSSカスケードの仕組みです。具体性の順序は上から下で、下のセレクターが優先されます。これは、すべてが等しい場合にのみ100％真実であることを忘れないでください。

重要：同じ名前のセレクターが複数ある場合、スタイルシートの下部にあるセレクターはありません。 すべてをオーバーライドする 同じ名前の以前のセレクターによって適用されたスタイルは、のみ 指定されたスタイリングプロパティを上書きします。

混乱している？

心配しないでください。すぐに意味があります。

これが3つの.hero-button 以前のクラス、すべて同じbackground-color 以前のプロパティですが、最初の2つのクラスには、それぞれ1つの追加のスタイリングプロパティ（padding）があります。 ＆font-size ）：

.hero-button {
  background-color: green;
  padding: 2rem;
}

.hero-button {
  background-color: blue;
  font-size: 2rem;
}

.hero-button {
  background-color: red;
}

これで、スタイルシートに同じ名前の3つのCSSクラスがあり、すべて同じbackground-colorプロパティをHTMLボタン要素にターゲティングしていますが、最初の2つのクラスには追加のスタイルプロパティがあります。どうなると思いますか？

結果は次のとおりです。

https://codepen.io/StrengthandFreedom/pen/mdyMGPL

ご覧のとおり、ボタン要素は、3つの.hero-buttonのすべてのスタイリングプロパティをスタック（結合）します。 クラス、そして今、私たちのボタン要素は3つのプロパティすべてを取得します：

  padding: 2rem;
  font-size: 2rem;
  background-color: red;

つまり、スタイルシートに同じ名前のCSSセレクターがある場合、セレクターが同じプロパティをターゲットにしている場合にのみ、プロパティがオーバーライドされます。

上記の例では、3つのクラスすべてがbackground-colorを対象としています。 プロパティ、およびここでは、CSSカスケードルール（順序の特異性）により、最下位クラスが優先されます。しかし、最後の.hero-button以降 スタイルシートターゲットのクラスであり、paddingでもありません font-sizeも プロパティ、最初の2つの.hero-buttonのプロパティ クラスはボタン要素に適用できます。

この点で私が死んだ馬を打ち負かした理由は、複数の開発者があなたの人生を悲惨なものにすることに貢献した、大規模でまとまりのないCSSコードベースを扱っている状況で必然的に自分自身を見つけるからです。

最も一般的なシナリオの1つは、さまざまな開発者がすでに別の場所に存在するCSSクラスをスタイルシートに追加したことです。これは、前に見たように、CSSがプロパティをスタックすることを知らないか忘れるとすぐに混乱を引き起こします。

したがって、primary-buttonというCSSクラスを追加できます。 次のプロパティを使用します：

.primary-button {
  background-color: red
  padding: 1rem;
  font-size: 1.125rem;
}

しかし、何らかの理由で、ボタンに影が付いているように見えますが、追加していません。それは、誰かがボタン要素に直接スタイリングを適用したために、いくつかの原因が考えられます。

button {
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

または、誰かが以前に同じ名前のクラスをスタイルシートに追加し、box-shadowを追加したためです。 このようなプロパティ：

.primary-button {
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}

不要なスタイルを削除するには、コードベースでこの不要なプロパティが適用されている場所を見つけて削除するか、自分ので直接ターゲットにして削除する必要があります。 .primary-button このようなクラス：

.primary-button {
 background-color: red
 padding: 1rem;
 font-size: 1.125rem;
 box-shadow: 0; /*removes existing box shadow value*/
}

私はあなたが何を考えているか知っています。これは問題を解決するための厄介な方法です。正しい。ただし、既存のすべてのCSSコードにアクセスできない（通常は多くのレガシーコードを含む）大規模でまとまりのないプロジェクトにさらされることがあります（ある程度の経験を持つ開発者なら誰でもこれに関係する可能性があります）。このタイプの状況では、既存のコードを必要に応じて変更することはできません。既存のコードをオーバーライドする必要があります。その場合、CSSの特異性とソースの順序がどのように機能するかを知っておくとよいでしょう。

このWebサイトの特異性計算ツールを使用して、グループセレクター（セレクターの組み合わせ）を含むさまざまなCSSセレクターの特異性数を比較できます。

ヒント：CSSでの特異性の問題に対処しないようにするための良い方法は、タイプセレクターではなく、主にクラスを使用してUIのスタイルを設定し、IDのみを控えめに使用することです。また、成長するコードベースで予測できない問題が発生する可能性があるため、可能であればグループセレクターの使用は避けてください。