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

Question

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

为什么span2背景颜色没有设置为红色？它仍然是绿色的！发生了什么事？

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选择器+ 1标签选择器）获得更高的优先级，然后是.a（1类选择器）。这就是为什么在你的例子中绿色覆盖红色。

尝试使用＃div1 .a {} 而不是 .a 来获得所需的结果。

Answer 2

您需要使用!important

覆盖原始css

#div1 span{
    background-color:green;
}
.a{
    background-color:red !important;
}

将解决它