html - 跨度背景颜色样式未设置为工作

Question

#div1 span{
    background-color:green;
}
.a{
    background-color:red;
}
<div id="div1">
    <span>span1</span>
    <span class="a">span2</span>
</div>

为什么 span2 background-color 没有设置为红色？它仍然是绿色的!发生了什么事？

Answer 1

之所以会这样，是因为评分系统，css 引擎使用它来确定哪些规则具有最高优先级，因此应该应用。 它被称为特异性。 如果您想阅读有关该主题的更多信息，请访问以下资源:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

在您的情况下，#div1 span (1 id selector + 1 tag selector) 获得更高的优先级，然后 .a (1 class selector)。这就是为什么在您的示例中绿色会覆盖红色。

尝试使用 #div1 .a{} 而不是 .a 以获得预期的结果。