紛らわしいCSSの具体的なルールについての質問（24時間2番目のEd。でSAMS SAMS Teach Your CSSから）

Question

これは、ブラウザが競合に適用するルールをブラウザがどのように決定するかについての本のルール2/2ルールです。

idセレクタは、[インラインスタイル属性のあとに2番目に]固有のものです。ルール内に複数のidがある場合、最も多くのidセレクタを持つルールが勝ちます。

私が本当に話している何規則2理解していない - （単数形である）「ルールに複数のIDがある場合は、」それは言います。ルールが1つしかない場合、どのように競合や比較が行われますか（「最大のルールが勝つ」）？どのようにして1つのルールに異なる数のIDセレクタを持たせることができますか？ルールが1つしかない場合はどこで競合が起こりますか？

誰かがこのルールを徹底的に削除してもらえますか？私はウェブデザインの基礎を下ろそうとしているので、助けてくれてありがとう。

Answer 1

セレクタには、任意の数のIDセレクタがある場合があります。

たとえば、#id1 #id2は、IDがid1の子孫であれば、IDがid2の要素を選択します。それには2つのIDセレクタがあるので、具体的には#id2より具体的になります。#id2はIDの要素であれば他の条件なしに要素を選択するだけです。

そこでこれら二つのルール（無インラインスタイルを想定していない）との間で：

#id1 #id2 { color: red; } 
#id2 { color: blue; } 

最初のルールが優先され、最初のルールが複数IDセレクタを有しているので、その要素内のテキストは、赤色ではなく青色に着色されています。ここ

Answer 2

は一例であり、複数のIDを持つセレクタが優先取る：

<div id="parent"> 
    <div id="child"> 
     Some text here 
    </div> 
</div> 

今は、CSSを適用

#parent #child { 
    background-color: red; 
} 

#parent div { 
    background-color: yellow; 
} 

をセレクタ#parent #childが優先されます。それは第2のものよりも具体的であるからです。この場合、divは赤い背景になります。