CSSシリーズ:パート10 -特異性

ほとんどの開発者は、同じコンポーネントに異なるスタイルを追加します.たとえば、スタイルシートには、すべてのHTML DIV要素が黒の背景色を持つという状態があります.次に、スタイルシートのほかのdiv要素がクラス名で選択され、青色の背景色を与えられます.特異性の規則は、どのバックグラウンド色がブラウザによってレンダリングされるかを決定します.CSSの特異性を理解する欲求不満を防ぐのに役立つし、ドキュメントをスタイリングするときに自信を追加します.
場合は、このシリーズでは、以前の部品を逃した場合、訪問:

特異性の規則の理解
特異性の概念はカスケードスタイルシートの名前空間、すなわち「カスケード」参照と密接に関連している.カスケードは、スタイルシート内の競合する命令の場合、ブラウザでレンダリングするコントロールの一連の規則を参照します.
以下のHTMLコンポーネントを考えてみましょう.

<div class="my-class" id="my-id">My HTML Component</div>

開発者として、このコンポーネントをいくつかの方法で選択することができます.以下の例では、すべての3つを使用してこのコンポーネントを選択し、どのセレクタのプロパティとプロパティの値宣言をブラウザがレンダリングするかを検討します.
次の例では、クラスセレクタを使用してコンポーネントをスタイル設定しました.HTMLコンポーネントの背景は赤になります.

.my-class {
    background: red;
}

しかし、プロジェクトの他の設計要件のために、あなたは今、DIVタイプをスタイルしなければなりません.私たちのスタイルシートは次のようになります.

.my-class {
    background: red;
}


div {
    background: white;
}

特異性の規則は、現在遊びに来ます.そして、クラスセレクタがタイプセレクタより具体的であるので、我々のHTMLコンポーネントの背景色は赤いままです.
デザイン要件が再び変更され、私は黒の背景にHTMLコンポーネントを変更する必要があります.問題は、.私のクラスセレクタは、プロジェクト全体に散在する複数のコンポーネントに適用されます.また、この特定のコンポーネントを変更する必要があるので、IDセレクタを使用します.下記を参照

.my-class {
    background: red;
}


div {
    background: white;
}


#my-id{
    background: black;
}

IDセレクタは、クラスとタイプセレクタよりも具体的なので、我々のコンポーネントは現在、黒の背景色をしています.
2つの規則が等しい特異性を持つ場合、CSSスタイルシートで最後に宣言される宣言は使用されるものです.
このチュートリアルは単なる導入であり、より複雑な状況に適用されるルールが多くあります.しかし、特異性の概念を理解することによって、それが起こるならば、あなたはコードの中でこのような問題を解決することができます.
The Mozilla Development Network: Specificityはこれらの規則の事実上の権威で、あなたが問題に立候補するならば、あなたが探検したいところです.

継承の理解
継承は、CSSプロパティが既定で、その要素の親要素に設定された値を継承するときです.すべてのCSSプロパティが親から子へ転送されるわけではありませんが、実行時に意図しない動作を生成できます.
デフォルトで継承を提供するプロパティの例は、フォントファミリです.あなたがbodyタグに特定のフォントファミリーを割り当てるならば、このフォントファミリーは体の中で入れ子にされたあらゆる構成要素で描かれるフォントになります.開発者として、HTMLタグを割り当てられたフォントファミリーと異なるフォントファミリーをレンダリングするには、個々のコンポーネント、クラス、IDに異なるフォントファミリプロパティ値を割り当てることができます.
開発者として、継承を変更する他の方法があります.すべてのCSSプロパティは、継承に関連する次のプロパティ値を受け取ります.
Inherit :プロパティの値を親要素のプロパティと同じにする
選択した要素に適用したプロパティ値を既定値に設定する
unset :プロパティを自然な値にリセットします.これは、プロパティが自然に継承された場合、継承されるように動作します.
*特異性の規則に従って、直接対象となる要素は常に、要素がその祖先から継承する規則に優先します.
このシリーズの残りをチェックすることによって、CSSについて詳しく知る: