虽然它可以与!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>
我认为具体到底部的应该覆盖顶部的一个吗?还是最上面的那个太具体了?如果是这样,我该如何使最底层的优先于上一个?谢谢!
我认为具体到底部的应该覆盖顶部的一个吗?
否,因为第一个具有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] 删除。
我来说两句