css - 具体性の低いcssが発生する理由

Question

<html>
<head>
<style>
#wo{
    color: red;
}

p{
    color: yellow;
}
</style>
</head>
<body>

<div id="wo">
<p>Hi</p>

</div>
</body>
</html>

これは私のコードです。p(0,0,0,1) よりも css(0,1,0,0) でより高い特異性を持つ id wo のプロパティを宣言するのに、なぜ私の段落が黄色を示すのですか?

score 3 · Accepted Answer

Hiは要素内pではなく、要素内にあるためですdiv#wo。要素は、継承を通じてルールpによって間接的にのみ影響を受けますが、ルールは要素を直接対象としているため、継承されたプロパティを上書きします。#wopp

特異性は、2 つのルールが同じ要素に一致する場合にのみ適用されますが、これはあなたのケースではありません。

1 に答える 1