css - 親がより具体的なセレクターを持っているのに、子要素が親から色を継承しないのはなぜですか?

Question

次のコード worldで赤ではなく青になっているのはなぜですか?

の特異性.my_classはですが、( )で特異性の高い方0,0,1,0の色を継承する必要があります。#my_id0,1,0,0

#my_id {
    color: red;
}
.my_class {
    color: blue;
}

<p id='my_id'>
    Hello
    <span class='my_class'>
        world
    </span>
</p>

score 3 · Accepted Answer

これが発生する理由は、特異性ではなく、継承によるものです。

このように見てください。スパンにそのクラスがない場合、親の <p> 要素から赤を継承し、「世界」は赤になります。ただし、これは継承によるものであることに注意してください。

クラスを介してスパンの色を設定すると、継承された値がオーバーライドされます。

特異性は、競合する複数のルールでどのルールを使用するかを決定するためのものです。あなたの例では、 <span> には競合するルールがないため、具体性は関係ありません。ただし、これをスタイルに追加した場合:

#my_id span {color: orange}

ID の特異性がクラスよりも大きいため、「世界」がオレンジ色になっていることがわかります。

score 3 · Accepted Answer

継承された値は、他のスタイル宣言が要素に直接適用されていない場合にのみ、要素に対して有効になります。

このスタイルは次の要素に適用されますid="my_id":

#my_id {
    color: red;
}

...そして、そのプロパティが指定されていclass="my_class" ない場合にのみ、 having 内にネストされた要素に適用 (継承) されます。color

...宣言すると、これはもはや当てはまりません:

.my_class {
    color: blue;
}

score 2 · Accepted Answer

それは特異性と場所に基づいています。クラスはテキストに直接適用されますが、ID はさらに離れています。

score 2 · Accepted Answer

より簡単に考えると、特異性の順序は同じレベルで適用されます。スタイルがよりローカルな親にある場合は、先祖がより特異性の高いスタイルを持っているかどうかに関係なく、それが適用されます (より遠くにあるため、またはローカルではないため) ）。

4 に答える 4