Селекторы, часть 1 / Испытание. Дуэль. [18/18]

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения.

Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью

ВК ВКонтакте или FB Facebook

×

Испытание. Дуэль. [18/18]

В финальном испытании снова вернёмся к биатлону.

Это необычное испытание, так как вам не надо менять HTML-код. Также все CSS-правила уже содержат правильные стили.

Но есть загвоздка: у CSS-правил потерялись селекторы. Вам нужно всего лишь подобрать нужные селекторы для каждого CSS-правила.

Подсказка: начните с перебора классов.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Испытание. Дуэль</title> </head> <body> <div class="shooter-1"> <ul class="target"> <li> <div class="hitbox"></div> <div class="lever"><span></span ></div> </li> <li class="miss"> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> <li class="miss"> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> <li> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> <li class="miss"> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> </ul> </div> <div class="shooter-2"> <ul class="target"> <li> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> <li> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> <li> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> <li> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> <li> <div class="hitbox"></div> <div class="lever"><span></span></div> </li> </ul> </div> </body> </html>
CSS
body { width: 280px; margin: 0; padding: 0; } selector { padding: 55px 0 55px 0; border-bottom: 1px dashed #cccccc; background: #fcf8e3; } selector { padding: 55px 0 55px 0; background: #d9edf7; } selector { width: 200px; height: 25px; margin: 0 auto; padding: 10px 15px 10px 15px; border-radius: 2px; background: white; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); overflow: hidden; list-style: none; } selector { position: relative; float: left; width: 22px; height: 22px; margin-right: 20px; border: 1px solid black; border-radius: 50%; background: #333333; font-size: 0; } selector { margin-right: 0; } selector { width: 10px; height: 10px; margin: 6px auto; border-radius: 50%; background: #999999; } selector { position: absolute; top: -2px; left: -2px; width: 26px; height: 26px; border-radius: 50%; background: #f5f5f5; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } selector { position: absolute; top: 12px; left: 11px; width: 5px; height: 25px; background: #f5f5f5; box-shadow: -1px 15px 2px rgba(0, 0,0 , 0.3), 1px 15px 2px rgba(0, 0, 0, 0.3); } selector { display: none; } selector { display: none; } selector { display: none; } selector { display: none; }
?

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.