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 с id = "testBlue". Этот селектор более конкретный, чем простой селектор для класса или id testGreen, поэтому он выигрывает. Вам просто нужно селектор более конкретные, чем #testBlue пролете, что не трудно найти:

#testBlue span.testGreen { 
    color: green; 
} 

Answer 2

#testGreen { color: red !important;} 

или

.testGreen { color: red !important;} 

Либо будет переопределить унаследованное правило, поскольку !important ставит больший вес одной стороны в противном случае равного решения.

Answer 3

Dont использовать важно придать ему больший вес, как это

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

Редактировать

Ive преподавали использованием важно! Плохая практика

Некоторые объекты в CSS имеют разный вес в решении применить правило

См. http://htmldog.com/guides/cssadvanced/specificity/

Я полагаю, его не неправильно использовать важные, но более практично использовать для взвешивания specicifity

Answer 4

Вы можете использовать селектор

#testBlue * { color:Blue; } 

Answer 5

span#testGreen 
{ 
    color: green; 
} 

Answer 6

Вы также можете использовать стандартные CSS DOM селекторы (так что вы можете оставить имена классов), как это:

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

пяди testblue ТО прямой потомок & & ПЕРВОГО РЕБЕНКА следующих родственный пролет