Испытание. Дуэль. [18/18 ] - Как постичь взаимное позиционирование мишеней?

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

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

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

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

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

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

li:last-child {
margin-right: 0;
}

.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);
}

span {
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);
}

.shooter-1 .miss .lever {
display: none;
}

.shooter-2 li:nth-child(1) .lever,
.shooter-2 li:nth-child(4) .lever,
.shooter-2 li:nth-child(5) .lever{
display: none;
}

selector {
display: none;
}

selector {
display: none;
}

22

можно спросить, зачем все таки использовать 4 правила display:none; если можно в одном через запятую перечислить что именно не показывать

1 лайк
23

Если расписать на 4 правила, то код читабельнее будет.

24

Задание не для закрепления пройденного, а на подбор без осмысления. Теорию понял, но в задании ничего не понятно, особенно по короткому решению здесь предложенному. Конечно, по ширине и высоте, радиусу закругления можно понять, где кружок, а где прямоугольник. Но, например, span, который позиционировался, как тег помогающий задать стиль определенному куску текста, в данном задании выполняет роль ножки для белого кружка? По-моему слишком усложнено, данная теория не позволяет решать такие задачи с ходу. Задали правило для левера и хитбокса, второй стрелок стрелял, а где первый не понятно.

25

Правила для .lever и .hitbox задают стили для мишеней сразу обоих стрелков.
Что вы имели в виду?

26

Я не заметил, что для первого задан класс miss в строчках, лишь где он попал. Теперь понял что значит miss>lever, т.е. там где мисс, автоматом левер, а мисс задан только там, где были попадания. Соответственно мишени первого закрыли одной строчкой.

1 лайк
27

Так же получилось без изменения свойств на 100%

[details=CSS]

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

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

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

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

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

.shooter-1 li:last-child, .shooter-2 li:last-child {
margin-right: 0;
}

.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);
}

span {
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);
}

.shooter-1 li:nth-child(2)>.lever, .shooter-1 li:nth-child(3)>.lever, .shooter-1 li:nth-child(5)>.lever {
display: none;
}

.shooter-2 li:nth-child(1)>.lever, .shooter-2 li:nth-child(4)>.lever, .shooter-2 li:nth-child(5)>.lever {
display: none;
}[/details]

28

С селектором .miss было бы короче.

30

в смысле .miss:nth-child вместо .shooter-1 li:nth-child ?
если нет, можно пример?))

31

Вы выбирали мишени с помощью псевдоклассов. Не заметили, что как раз у второй, третьей и пятой мишени первого стрелка есть класс miss. То есть достаточно было бы селектора .miss .lever для выбора сразу трех мишеней.

1 лайк
32

[details=сss].miss:nth-child(2) .lever, .miss:nth-child(3) .lever,
.shooter-2 li:nth-child(1) .lever,
.shooter-2 li:nth-child(1n+4) .lever,
li:last-child .lever{
display: none;
}[/details]

не знаю короче ли получиться еще))?

33

Я имела в виду, что можно первое ваше правило с display: none; сделать короче. Не надо всё в одно склеивать) В вашем правиле, которое я цитировала, вы могли обойтись вовсе без псевдоклассов. Сосредоточьтесь на этом.

34

Понял, о чем вы, не заметил что действительно есть класс к 2-й, 3 и 5.
Ну тогда так))

[details=mycss]
.miss .lever,
.shooter-2 li:first-child .lever,
.shooter-2 li:nth-child(1n+4) .lever {
display: none;
}[/details]

35

Формула здесь не очень нужна, учитывая, что выбираете один элемент.

36

с формулой покороче, ну нужно добавлять еще раз селектор с псевдоклассом last child

37

Доброго времени суток! Хочу задать вопрос, может он покажется глупым, но я реально не пойму в чем дело и у меня ли одно только так. Такая проблема: как и масса людей столкнулся с проблемой в данном задании, но самое интересно то, что когда я оканчательно сдался зашел сюда и скопировал некоторые строки кода. В итоге, те люди, у которых показало 100% совпадения с таким же кодом как и у меня, но мой рисунок совершенно не похож на оригинал! А проверка показала 92% совпадения! Объясните, пожалуйста, с чем это может быть связано и что мне делать? Буду вам очень благодарен!!!

мвавамв.png1073×706 86.9 KB

38

CSS напиши. скорей всего здесь не хватает margin 0 у last-child

39

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

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

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

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

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

.shooter-1 li:last-child {
margin-right: 0;
}

.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);
}

span {
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);
}

shooter-1 li:nth-child(2)>.lever, .shooter-1 li:nth-child(3)>.lever, .shooter-1 li:nth-child(5)>.lever {
display: none;
}

.shooter-2 li:nth-child(1)>.lever, .shooter-2 li:nth-child(4)>.lever, .shooter-2 li:nth-child(5)>.lever {
display: none;
}

selector {
display: none;
}

selector {
display: none;
}

40

У вас нет точки в начале селектора. О проблеме с отображением мишеней не в один ряд в некоторых браузерах известно. Пока проблема не решена.

41

.shooter-2 li:last-child не хватает margin-right: 0;
а так то да, как писала выше Ineska скорей всего браузер криво отображает