Задать вопрос
@game802

Ошибка в тесте или я чего-то не понимаю?

Добрый день уважаемые знатоки. У меня назрел такой вопрос:
Есть ресурс, как htmlbook. Решил пробежаться по самоучители и повторно пройти все тестовые задания по самоучителю... но вот столкнулся со следующей проблемой. Если раздел, который называется Контекстные селекторы, который находится тут.
В конце этой обучающей статьи есть тестирование, в котором меня очень смутил первый вопрос:
1. Какой цвет будет у текста списка в следующем коде?
HTML:
<body>
  <ul>
   <li>
    <ul>
      <li><span>Первый</span></li>
      <li><span>Второй</span></li>
      <li><span>Третий</span></li>
    </ul>
   </li>
  </ul>
 </body>
CSS:
UL LI UL { color: green; }
UL UL { color: red; }
LI SPAN { color: blue; }
LI LI { color: fuchsia; }
UL SPAN { color: orange; }

Варианты ответов:
  1. Зелёный
  2. Красный
  3. Синий
  4. Розовый
  5. Оранжевый

Правильным ответом, оказался ответ под номером 5 (Оранжевый).
Но у меня образовался следующий вопрос: Почему правильным ответом не оказался ответ, под номером 1 (Зеленый)? Ведь если брать специфичность, то выигрывает именно этот вариант. Так почему же 1 вариант(Зеленый) не верен, ведь специфичность у этого варианта выше, чем у всех остальных? Спасибо за помощь!
  • Вопрос задан
  • 141 просмотр
Подписаться 1 Оценить 1 комментарий
Решения вопроса 3
Lynn
@Lynn
nginx, js, css
UL LI UL задаёт цвет текста во вложенном UL.
Но UL SPAN задаёт цвет текста тега SPAN, т.е. он не будет пытаться унаследовать цвет текста, у него задан собственный цвет.

LI SPAN имеет такую же специфичность, но ему не повезло, при прочих равных побеждает последний.
Ответ написан
denis_bardak
@denis_bardak
Web Developer
UL SPAN { color: orange; } тупо идет последним по этому переопределяет пред идущие стили
Ответ написан
FFxSquall
@FFxSquall
Могу писать код, могу не писать
Cпецифичность бы сработала если бы для зеленого цвета селектор был UL LI SPAN, а так у нас получается, что зеленый цвет назначен для UL и пока у span не будет объявлен в стилях свой цвет, span'ы внутри списка будут наследовать зеленый, но как только мы в селекторе используем тег span он станет приоритетнее. В примере у нас сначала действует blue, а потом его перебивает orange так как он находится ниже.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы