Помогите с hitbox

Курсы §8. Селекторы
1

Здравствуйте! Никак не пойму почему в HTML коде аж 5 hitbox’ов для каждого стрелка, ведь насколько только один hitbox. Вот код CSS

body {
width: 280px;
margin: 0;
padding: 0;
}

.shooter-1 .target {
padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;
}

.shooter-2 .target {
padding: 55px 0 55px 0;
background: #d9edf7;
}

.hitbox {
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;
}

Вот код HTML

Испытание. Дуэль
2

Ссылку на задание прикрепите, пожалуйста. Не помню, какая там разметка.

3 
<!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>
4

Вы начали не с того селектора. Смотрите внимательно. Есть два больших контейнера .shooter-1 и .shooter-2. Они остались без стилей у вас. Расставляйте селекторы по местам, двигаясь сверху вниз по html-коду.

5 
.shooter-1{
    padding: 55px 0 55px 0;
    border-bottom: 1px dashed #cccccc;
    background: #fcf8e3;
}

.shooter-2{
    padding: 55px 0 55px 0;
    background: #d9edf7;
}

Вот так? Я так понял нужно смотреть сколько классов изменяется при задании стилей, и на основе этого называть селекторы правильно + минимизация, т. е. не правильно было указывать контекстный селектор, а писать просто два класса для shooter-1 и 2?

6

Дальше я так понял -
.target {
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;
}
Чтобы получилось 2-ве белые полоски?

7

Да, так. Контекстные селекторы у вас будут в конце, где display: none;

8

C ли вроде разобрался

li {
    position: relative;
    float: left;
    width: 22px;
    height: 22px;
    margin-right: 20px;
    border: 1px solid black;
    border-radius: 50%;
    background: #333333;
    font-size: 0;
}

Но что делать с кружочком, который вылез в target на вторую строку НЕ ЗНАЮ ЧТО ДЕЛАТЬ. ВРОДЕ НУЖНО как-то задействовать
selector {
margin-right: 0;
}
НО Я НЕ ЗНАЮ КАКОЙ СЕЛЕКТОР УКАЗАТЬ

9

У каждого li справа есть отступ 20px, нужно обнулить этот отступ у последнего li.
Вы знаете о псевдоклассах? Как выбрать последний элемент?

10

nth-child(5)?

11

Сработало!!!

12

Дальше идет вот так
.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
.lever {
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);
}

13

Что дальше (как нарисовать прямоугольник для закрывшейся мишени?) Я понимаю что надо назначить селектор для вот этого куска:
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);
}
Но не понимаю какой селектор?

14

А подумать? Ведь неиспользованных элементов осталось немного. Всего два. И только один из них есть у каждой мишени.

15

span! Сработало, но я не знаю почему? По моему мы вообще не учили это в данной главе курсов?! Я вроде выучил и разобрал все главу, но на испытании такое чувство, что я не учил ничего (.
Как я понял мы типо работали “слоями”, которые накладывались друг на друга (это я про круглые мишеньки). А потом когда надо с помощью position мы закрывали либо открывали нужные “слои”. Вот только не пойму “вложенности” .hitbox, lever, span. + не понятно почему в lever есть свойство “position: absolute”. Просто я хочу записаться на БАЗОВЫЙ ИНТЕНСИВ, но боюсь что зря потрачу деньги и ничего не пойму. Как половину данного задания ((

16

Почему тут вообще span (зачем он нужен)?

17

Вместо span мог быть и div. С его помощью сделана “палочка” внизу мишени. Хотя для чистой разметки пустые элементы (без содержимого) - это не очень хорошо.

18

Здравствуйте! Вчера со всем этим разбирался. Вроде разобрался. У меня 2 последних вопроса:

  1. Почему когда мы используем
    .miss .lever {
    display: none;
    }
    пропадает не только серый кружок описанный в .lever, но и палочка, описанная в span?
  2. Смотрел в инспекторе Хрома и увидел, что родительский элемент для span - это li.miss почему так, ведь там вложены еще div.hitbox and div.lever?
19
  1. Потому что “палочка” span вложена в блок с классом .lever. И с display: none; исчезает не только сам блок, но и всё, что находится внутри него.
    К примеру, если вы напишите display: none; для body, то страница окажется пустой.
  2. div.hitbox никак не может быть родительским элементом для span. А вот div.lever - да, это родитель. Проверьте еще раз, недосмотрели видимо.
20
  1. Спасибо я так и думал, мол дело в наследовании?!