这种背景颜色不会覆盖其他颜色的原因是什么？

Question

虽然它适用！重要但我宁愿避免使用它..任何人都可以向我解释为什么这不会超越另一个？

#g1 div div {
    background: #fefefe;
}

#winnar {
    background: #a2f5ff;
}

和html

<div>
    <div>Price</div>
    <div id="winnar">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

我认为底部的一个应该覆盖顶部的一个特异性吗？或者是最具特色的？如果是这样，我怎样才能使底部覆盖顶部？谢谢！

Answer 1

  

我认为对底部的那个特异性应该覆盖   一个在顶部？

不，因为第一个有1个id选择器和2个标记名选择器。但第二个只有1个id选择器。

然后，第一个获胜。

您可以在此处找到确切的公式：http://www.w3.org/TR/CSS21/cascade.html#specificity

通常，如果您希望第二条规则具有更多特异性，请确保另一条规则包含在另一条规则中：

#g1 div div { background: #fefefe; }
#g1 div div#winnar { background: #a2f5ff; }

但在这种特殊情况下更好地使用

#g1 div div { background: #fefefe; }
#g1 #winnar { background: #a2f5ff; }

但请注意，多个后代选择器可能很慢。如果可能的话，尝试使用童年选择器：

#g1 > div > div { background: #fefefe; }
#g1 #winnar { background: #a2f5ff; }