Селекторы CSS2 и переопределение стилей
Это 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?
Я пробовал селекторы идентификаторов и классов, но это не отменяет их.
Ответы 6
#testGreen { color: red !important;}
или же
.testGreen { color: red !important;}
Любое из них переопределит унаследованное правило, потому что !important придает больший вес одной стороне решения, в остальном равного.
Я также считаю, что его решение лучше. Вы также должны проголосовать за него.
Не используйте важный, дайте ему больше веса, как это
#testBlue span { color:Blue; }
#testblue #testgreen{color:Red}
Редактировать
Меня учили использовать! Важно - плохая практика
Некоторые объекты в css имеют разный вес при принятии решения о применении правила
См. http://htmldog.com/guides/cssadvanced/specificity/
Я полагаю, это не неправильно использовать важную, но лучшую практику для использования взвешивания для конкретности.
извините цвет: зеленый должен быть цвет: красный
Ну, тогда отредактируйте свой пост. Объясните, почему! Important не является оптимальным, и я проголосую за это.
Вы все еще забыли изменить цвет на «красный».
Да, после того, как Аллен внес небольшую поправку в свой код.
Вы можете использовать селектор
#testBlue * { color:Blue; }
Почему? Не могли бы вы добавить объяснение?
В CSS селекторы с более высокой специфичностью переопределяют более общие селекторы.
В вашем примере вы определили стиль для промежуток внутри div с id = "testBlue". Этот селектор более конкретно, чем простой селектор для класса или идентификатора testGreen, поэтому он выигрывает. Вам просто нужен селектор более специфичный, чем #testBlue span, найти который несложно:
#testBlue span.testGreen {
color: green;
}
Было бы неплохо пояснить, почему это работает. В противном случае +1.
Сделано добавление некоторой аргументации.
span#testGreen
{
color: green;
}
Вы также можете использовать стандартные селекторы CSS DOM (чтобы вы могли отбросить имена классов) следующим образом:
#testblue > span:first-child + span{}
testblue span, КОТОРЫЙ ЯВЛЯЕТСЯ ПРЯМЫМ ПУТЕШЕСТВИЕМ && ПЕРВЫЙ РЕБЕНОК СЛЕДУЮЩИЙ РАЗДЕЛ
Ваше решение сработало, и я поддержал его, спасибо! Я принял тот, который дал @alexmeia, потому что мне он кажется проще.