Наследование CSS: Переопределение родительского селектора, который является порожденным селектором
Как я могу заставить эту ссылку использовать дочерний селектор, не изменяясь или удаляя родительский селектор? (Я хочу, чтобы ссылка была синей.)
<html>
<head>
<style>
.parent a { color:Red; }
.child { color:Blue; }
</style>
</head>
<body>
<div class="parent">
<a class="child" href="http://www.stackoverflow.com">
stackoverflow
</a>
</div>
</body>
</html>
Удивительно мне, что родитель переопределяет ребенка в этом случае!
2 ответа
Используйте a.child в качестве селектора.
<html>
<head>
<style>
.parent a { color:Red; }
a.child { color:Blue; }
</style>
</head>
<body>
<div class="parent">
<a class="child" href="http://www.stackoverflow.com">
stackoverflow
</a>
</div>
</body>
</html>
Это связано с особенностями CSS. Дополнительный a после .parent делает его более конкретным, чем просто .parent , и, соответственно, более конкретным, чем просто .child . Предложение Obalix придает селекторам одинаковую специфичность, поскольку оба имеют базовый элемент HTML и обозначение класса. Когда специфичность равна, тогда будет применено самое глубокое значение, указанное в иерархии, как вы и ожидали.
Эта статья (и ресурсы, на которые она ссылается) прекрасно объясняют специфику CSS: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html