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中，具有更高特异性的选择器会覆盖更通用的选择器。

在您的示例中，您为id =“testBlue”的div中的范围定义了一种样式。此选择器更具体比类的简单选择器 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/

我认为使用重要但更好的做法来使用加权来实现特定性并没有错误

Answer 3

#testGreen { color: red !important;}

或

.testGreen { color: red !important;}

要么覆盖继承的规则，要么!important会给予一个平等决定的一方更多的权重。

Answer 4

span#testGreen
{
    color: green;
}

Answer 5

您可以使用选择器

#testBlue * { color:Blue; } 

Answer 6

你也可以使用标准的CSS DOM选择器（所以你可以删除类名），如下所示：

#testblue > span:first-child + span{}

testblue span这是直接的后代＆amp;＆amp; FIRST-CHILD NEXT SIBLING span