为什么该背景色不会覆盖其他背景色?

shan

虽然它可以与!important一起使用,但我还是希望避免使用它。

#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>

我认为具体到底部的应该覆盖顶部的一个吗?还是最上面的那个太具体了?如果是这样,我该如何使最底层的优先于上一个?谢谢!

i

我认为具体到底部的应该覆盖顶部的一个吗?

否,因为第一个具有1个ID选择器和两个标记名选择器。但是第二个只有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; }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章