#html #css #css-specificity
Вопрос:
У меня есть эти два объявления CSS. У обоих одинаковая специфичность — я даже проверил на калькуляторе специфичности, чтобы убедиться, что они равны. В этом случае к элементу должно быть применено последнее объявление, найденное в CSS, поэтому цвет элементов списка должен быть зеленым. По причине, которую я не могу понять, в данном случае они отображаются красным цветом. Также совершенно необъяснимо, что маркеры списка отображаются зеленым цветом. Даже если бы у меня было правило «!важно» для «зеленой» декларации, это не сработает.
li:first-line { color: red; }
ul li { color: green; } <ul>
<li>Go Out The House</li>
<li>Get In Your Car</li>
<li>Start Driving</li>
</ul> Ответ №1:
Основная причина, по которой это не работает, заключается в том, что вы выбираете первую строку из li 1 строки, поэтому они применяются ко всем. Если вы переключите первую строку на ul нее, она будет работать так, как вы ожидали. Из-за этого специфика работает так, как и ожидалось. Любые дополнительные строки в li нем будут зелеными. Вот почему пули зеленые.
ul:first-line { color: red; }
ul li { color: green; } <ul>
<li>Go Out The House</li>
<li>Get In Your Car</li>
<li>Start Driving</li>
</ul> Комментарии:
1.Блог о
::first-linecss-tricks.com/almanac/selectors/f/first-line
Ответ №2:
Вот решение
<html>
<head>
<style>
ul::first-line { color: red; }
ul li { color: green; }
</style>
</head>
<body>
<ul>
<li>Go Out The House</li>
<li>Get In Your Car</li>
<li>Start Driving</li>
</ul>
</body>
</html>
Проблема в том, что вы применили стиль к