html - CSS2 选择器和样式覆盖

Question

这是 HTML:

<div id="testBlue">
    <span>hello</span>
    <span id="testGreen" class="testGreen">hello2</span>
</div>

如果我在 CSS 中设置:

#testBlue span { color:Blue; }    
.testGreen, #testGreen { color:Green; }

如何覆盖第二个 SPAN 中的通用样式？

我已经尝试了 id 和 class 选择器，但它没有覆盖它。

Answer 1

在 CSS 中，具有更高特异性的选择器会覆盖更通用的选择器。

在您的示例中，您在 id = "testBlue"的 div 中为 span 定义了样式。这个选择器比类或 id testGreen 的简单选择器更具体，所以它胜出。您只需要一个比 #testBlue span 更具体的选择器，这不难找到:

#testBlue span.testGreen {
    color: green;
}