同じ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 の両方が同じ要素を指しています。

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

 0
追加された 編集された
ビュー: 4
源
ro ru fr es pt de zh hi bn ar uk
私はこれを修正しようとしています - unraveled.com/publications/assets/css_tabs/index.html ので、選択したタブは本文IDではなくタブIDで定義されます。
追加された 著者 Qiao, 源

2 答え

あなたはあなたの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

2
追加された
源

違いは、 CSSの特異性と呼ばれるものに由来します。

それはあなたが使用するセレクタの特定のタイプの数に基づいて優先的にCSSルールを順序付けることを可能にするコンセプトです。IDセレクタは最も特異性が高く、要素セレクタは最小です。

たとえば、HTMLタグ

...

を選択する2つのセレクタは、 
#one{
    color: red;
}
.one{
    color: blue;
}
h1{
    color: green;
}

赤と表示されます。 #one セレクタを削除すると、青のように表示され、最後に .one /strong>をクリックします。

1
追加された
源