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和类选择器,但它没有覆盖它.

Answer 1

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

在您的示例中,您为div中的span定义了一个样式,其id为"testBlue".这个选择器比class或id testGreen的简单选择器更具体,因此它获胜.你只需要一个比#testBlue span更具体的选择器,这不难发现:

#testBlue span.testGreen {
    color: green;
}

Answer 2

不要使用重要的给它更多的重量这样

#testBlue span { color:Blue; } 
#testblue #testgreen{color:Red}

编辑

我已经被教过了!重要的是不好的做法

css中的某些对象在决定应用规则时具有不同的权重

见http://htmldog.com/guides/cssadvanced/specificity/

我认为使用重要但更好的做法来使用加权来进行特定处理并没有错