Я спросил немного неправильно, но все же полезен, вопрос here. Публикация нового для того, чтобы держать его в чистоте.Специфичность и наследование в CSS
Внизу, не могли бы вы помочь мне понять, почему .one li
побед над .one .two
, что делает Item One
синим вместо розового? Согласно правилам специфичности (link) два вложенных класса имеют показатель специфичности 20, а класс и элемент имеют оценку 11. .one .two
должен, согласно этому, выиграть.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
color: red;
}
.one li {
color: blue;
}
.one .two {
color: pink;
}
.one .two .three {
color: purple;
}
.two {
color: green;
}
.one.two {
color: yellow;
}
.two.three {
color: grey;
}
</style>
</head>
<body>
<div class="one">
<ul class="two">
<li>Item One</li>
</ul>
</div>
<div class="three two one">
<p>TEST</p>
</div>
</body>
</html>
Тот же случай, что и в другом вопросе. '.one li' для' li' (прямо к нему), тогда как '.one .two 'присваивает цвет родительскому' ul'. Наследование происходит только тогда, когда сам 'li' не имеет определенного цвета. Вычисления спецификаций применяются только тогда, когда два или более селектора нацелены на один и тот же элемент. Здесь они не нацелены на один и тот же элемент, и, следовательно, специфика не имеет никакой роли. – Harry
Принятый ответ на ваш предыдущий вопрос объясняет, почему очень четко. Возможно, вам следует попросить разъяснения по тем вопросам, которые вы не поняли в ответ? – Quentin
@Quentin В предыдущем разделе не обсуждается Inheritance, на что обращается этот конкретный вопрос. – Anders