Специфика вложенных CSS-селекторов
Я пытаюсь выяснить, почему «Элемент Один» не отображается оранжевым цветом ниже. Согласно правилам специфики, селектор.one.two, должен иметь оценку специфичности 20 (два класса)..one li должно иметь 11 (один класс, один элемент). Чувствуется, что он должен быть оранжевым, а не синим.
Есть идеи, почему это не так?
Кроме того, как побочный вопрос, почему я не могу иметь пробел между.one и.two в.one.two селектор? Это работает для Chrome, но неВот.
Ссылка на специфичность расчетов.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
color: red;
}
.two {
color: green;
}
.one li {
color: blue;
}
.one.two {
color: orange;
}
</style>
</head>
<body>
<div>
<ul class="one two">
<li>Item One</li>
</ul>
</div>
</body>
</html>