CSS2选择器和样式覆盖

Question

This is the HTML:

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

If I have set in CSS:

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

How can I override the general style in the second SPAN?

I have tried both id and class selectors but it doesnt override it.

Answer 1

In CSS, selectors with higher specificity override selectors that are more general.

In your example you defined a style for a span inside a div with id = "testBlue" . This selector is more specific than the simple selector for the class or id testGreen , so it wins. You just need a selector more specific than #testBlue span , that is not difficult to find:

#testBlue span.testGreen {
    color: green;
}

Answer 2

Dont use important give it more weight like this

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

Edit

Ive been taught using !important is bad practice

Certain objects in css have different weight in the decision to apply a rule

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

I suppose its not wrong to use important but better practice to use weighting for specicifity

Answer 3

#testGreen { color: red !important;}

or

.testGreen { color: red !important;}

Either will override the inherited rule, because !important puts more weight to one side of an an otherwise equal decision.

Answer 4

span#testGreen
{
    color: green;
}

Answer 5

你可以使用选择器

#testBlue * { color:Blue; } 

Answer 6

You can also use the standard CSS DOM selectors (so you can drop the class names) like this:

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

testblue span THAT IS DIRECT DESCENDANT && FIRST-CHILD NEXT SIBLING span