Испытание: Дуэль (99%)

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

Есть небольшой нюанс, от которого не получается избавиться (видно на скриншотах).

Код:

body{
    width:280px;
    margin:0;
    padding:0;
}
.shooter-1{
    padding:55px 0;
    background:#FCF8E3;
    border-bottom:1px dashed #ccc;
}
.shooter-2{
    padding:55px 0;
    background:#D9EDF7;
}
.target{
    margin:0 auto;
    width:200px;
    height:25px;
    padding:10px 15px;
    list-style:none;
    background:white;
    border-radius:2px;
    box-shadow:0 0 3px rgba(0,0,0,0.5);
    overflow:hidden;
}
li{
    position:relative;
    float:left;
    width:22px;
    height:22px;
    margin-right:20px;
    background:#333;
    border:1px solid black;
    font-size:0;
    border-radius:50%;
}
li:nth-child(5){
    margin-right:0;
}
.hitbox{
    width:10px;
    height:10px;
    background:#999;
    margin:6px auto;
    border-radius:50%;
}
i{
    position:absolute;
    top:-11px;
    left:-11px;
    width:26px;
    height:26px;
    background:#f5f5f5;
    border-radius:50%;
    box-shadow:0 0 2px rgba(0,0,0,0.5);
}
.lever{
    position:absolute;
    background:#f5f5f5;
    width:5px;
    height:25px;
    top:9px;
    left:9px;
    box-shadow:
        -1px 15px 2px rgba(0,0,0,0.3),
        1px 15px 2px rgba(0,0,0,0.3);
}
.shooter-1 .target .miss .lever{
    display:none;
}
.shooter-2 .target li:nth-child(1) .lever{
    display:none;
}
.shooter-2 .target li:nth-child(4) .lever{
    display:none;
}
.shooter-2 .target li:nth-child(4)+li .lever{
    display:none;
}

скрин.jpg629×718 74.5 KB

2

Первое

i{
    position:absolute;
    top:-11px;
    left:-11px;
    width:26px;
    height:26px;
    background:#f5f5f5;
    border-radius:50%;
    box-shadow:0 0 2px rgba(0,0,0,0.5);
}

Это код, который отправили вы. Для удобства я зашёл в испытание, там немного другие координаты, а именно:

top:-2px;
left:-2px;

Вы меняли CSS? Этого делать именно в этом задании не надо, нужно просто было расставить селекторы.

Так же и здесь, у вас:

.lever{
    position:absolute;
    background:#f5f5f5;
    width:5px;
    height:25px;
    top:9px;
    left:9px;
    box-shadow:
         -1px 15px 2px rgba(0,0,0,0.3),
          1px 15px 2px rgba(0,0,0,0.3);
}

А дано было:

top:12px;
left:11px;

Второе

Ошибка была в том, что вы неправильно-таки поставили селекторы.
Поменяйте местами селекторы “i” и “.lever” и внесите правки, которые я вам перечислил в первом пункте. В крайнем случае, если что-то не поняли, вот ссылка на исправленный код.
Я указал в комментариях ваши ошибки. Удачи. :blush:

2 лайка
3

Благодарю! Я всё испортил, когда вместо li в начале указал .target - потом всё пошло наперекосяк)

5

dfvf.jpg603×835 59.9 KB

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

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

.miss .lever{
display: none;
}

.shooter-2 li:first-child .lever {
display: none;
}

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

.shooter-2 li:last-child .lever {
display: none;
}

6

Ваш код дает 100%.

7

Вот мой код:
body{
width:280px;
margin:0;
padding:0;
}
.shooter-1{
padding:55px 0;
background:#FCF8E3;
border-bottom:1px dashed #ccc;
}
.shooter-2{
padding:55px 0;
background:#D9EDF7;
}
.target{
margin:0 auto;
width:200px;
height:25px;
padding:10px 15px;
list-style:none;
background:white;
border-radius:2px;
box-shadow:0 0 3px rgba(0,0,0,0.5);
overflow:hidden;
}

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

li:last-child{
margin-right:0;
}
.hitbox{
width:10px;
height:10px;
background:#999;
margin:6px auto;
border-radius:50%;
}
.lever{
position:absolute;
top:-2px;
left:-2px;
width:26px;
height:26px;
background:#f5f5f5;
border-radius:50%;
box-shadow:0 0 2px rgba(0,0,0,0.5);
}
i{
position:absolute;
background:#f5f5f5;
width:5px;
height:25px;
top:12px;
left:11px;
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 .target li:nth-child(1) .lever{
display:none;
}
.shooter-2 .target li:nth-child(4) .lever{
display:none;
}
.shooter-2 .target li:nth-child(5) .lever{
display:none;

Не могу понять почему палочек не видно(

8

Поменяй i на span и все будет ок. тоже долго не мог понять откуда этот i, потом всмотрелся в код и увидел что еще не было использованно

3 лайка
9

В этом фрагменте:
.shooter-1.miss .lever{
display:none;
}
исправьте селектор на .miss .lever

1 лайк
10

Спасибо, помогло! :grinning:

11

Я считаю, что разницы нет, так как .miss потомок только .shooter-1. Поэтому и по-вашему, и по-моему правильно :relieved:

12

Да, но у вас нет пробела после первого селектора в правиле.

Он не работает. Поэтому по вашему не совсем правильно.

13

Спасибо, вопрос исчерпан)

14

100%

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

li>div>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);
}

.miss .lever {
display: none;
}

.shooter-2 li:first-child .lever {
display: none;
}

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

.shooter-2 li:last-child .lever {
display: none;
}

15

Усложнили немного. Хватит и li span.

16

Вот мой код Не пойму почему 99%. Может кто подскажет?
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:nth-child(5),
.shooter-2 li:nth-child(5){
margin-right: 0;

}

.shooter-1 .miss .lever,
.shooter-2 li:nth-child(1) .hitbox,
.shooter-2 li:nth-child(4) .hitbox,
.shooter-2 li:nth-child(5) .hitbox
{
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}

.shooter-1 li:nth-child(1) .hitbox,
.shooter-1 li:nth-child(4) .hitbox,
.shooter-2 li:nth-child(2) .hitbox,
.shooter-2 li:nth-child(3) .hitbox {
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);
}

ul li span {
position: absolute;
top: 9px;
left: 9px;
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);
}

.miss span {
display: none;
}

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

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

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

17

Что-то вы здесь напутали. Зачем такие четырехэтажные селекторы?

19

Откуда взялся селектор “i” ??

2 лайка
20

Вот мой вариант

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

ul {
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 li:nth-child(2)>.lever,
.shooter-1 li:nth-child(3)>.lever,
.shooter-1 li:last-child>.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;
}

21

поддержу вопрос : откуда i ?

22

i использовался в старой версии кода для этого задания. Позже разработчики заменили его на span.