css - マージンを再定義するために、CSSセレクターで親IDを指定する必要があるのはなぜですか？

Question

たとえば、私がこのHTMLを持っているとしましょう：

<ul id="nav">
  <li>one</li>
  <li id="my_item">two</li>
  <li>three</li>
  <li>four</li>
</ul>

そしてCSS：

#nav li {
  margin-bottom:10px;
}

#nav #my_item {
  margin-bottom:30px;
}

#my_item最後のセレクターに使用できないのはなぜですか？

score 5 · Accepted Answer

CSSは、特異性と呼ばれる概念を使用して、どのルールがどの要素に適用されるかを決定するためです。

どのルールが優先されるかを確認するときは、ここのリストを下に移動して、最初に適用されるルールで停止します。

score 0 · Accepted Answer

特異性のため: 最初のルールの特異性は 101 です#my_itemが、特異性は 100 しかあり!importantません。2 つのルールが同じ特異性を持つ場合、「最新」のルールが優先されます。

score 0 · Accepted Answer

「最後のセレクターに #my_item を使用できないのはなぜですか?」専門家から（特異性について）回答を得ていますが、代わりに次のようにすることもできます

#my_item {
    margin-bottom:30px !important;
}

3 に答える 3