同じCSSパスに変更すると異なる結果が表示される

このhtml:

<html>
<head>
</head>
<body>

<div id='outter_div'>
<div id='inner_div'>
    link
</div>
</div>

</body>
</html>

REDリンクになります。

そして、私たちがCSSの最初の行を

#span_id a {background: red;}

リンクは青色になります。

しかし、 #outter_div .span_class a#span_id
a
の両方が同じ要素を指しています。

この違いはどこから来ますか?すべてが同じときに色が変わるのはなぜですか?

ベストアンサー

あなたはあなたのCSSセレクターの比重を数学的に計算する方法を知っていますか?

これを読む。

比重を数学的に計算する方法あなたのCSSセレクター

だからあなたの質問に戻る。

#span_id a {background: red;}

1,0,1

#inner_div span a {background: blue;}

1,2,0

したがって、リンクは青です。

以前は赤だったから

#outter_div .span_class a {background: red;}

1,1,1,1

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です