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?

Я пробовал и идентификаторы, и селекторы классов, но он не отменяет их.

Answer 1

В CSS селекторы с более высокой специфичностью переопределяют более общие селекторы.

В вашем примере вы определили стиль для span внутри div с id = "testBlue" . Этот селектор более конкретен , чем простой селектор для класса или 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/

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

Answer 3

#testGreen { color: red !important;}

или

.testGreen { color: red !important;}

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

Answer 4

span#testGreen
{
    color: green;
}

Answer 5

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

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

промежуток testblue, который является прямым потомком && ПЕРВАЯ РЕБЕНОК СЛЕДУЮЩАЯ ЧАСТЬ

Answer 6

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

#testBlue * { color:Blue; }