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

TheBlackPro · 11.Сентябрь.2017 15:45:26

Приветствую.
Долго мучился с этим заданием, но найдя решение, обнаружил, что ножки мишеней сдвинуты.
С чем связан сей печальный факт, что так тревожит моего внутреннего перфекциониста?

Как должно быть:
sample

Моё творение aka Ад перфекциониста:
result

Код:
(Также, прошу оценить, и указать на корявости.)

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 {
display: flex;
justify-content: space-between;
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;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;

}

.lever {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}

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

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

{
display: none;
}

selector {
display: none;
}

Ineska · 11.Сентябрь.2017 16:10:13

.hitbox, .lever и span не на своих местах.

TheBlackPro · 12.Сентябрь.2017 04:11:57

Ох, либо я глупый, либо задание запутанное.
С надеждой на второе ставлю на первое.

averoff · 28.Октябрь.2017 22:07:34

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 {
display: flex;
justify-content: space-between;
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;
}

.shooter-1 li,
.shooter-2 li{
position: relative;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}

.lever {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}

.shooter-1 li:nth-child(3n+1) .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);
}

.shooter-1 li:nth-child(3n+1) span,
.shooter-2 li:nth-child(2) span,
.shooter-2 li:nth-child(3) span{{
position: absolute;
top: 10px;
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);
}

selector {
display: none;
}

averoff · 28.Октябрь.2017 22:10:01

Единственное не понял, а для чего там прописаны:

selector {
display: none;
}

Они как-то влияют на конечный результат?

Romzes · 14.Декабрь.2017 20:25:11

Два дня сидел над этим испытанием и нашел твой ответ. Единственное в твоем коде нужно поменять .hitbox и .lever местами и все станет на 100%

Unstoppable · 26.Декабрь.2017 12:28:41

Я конечно в шоке с этого задания )) Еле набрал 90%, думаю 100% можно набрать после года практики.
Слишком всё излишне усложнено.

Romzes · 26.Декабрь.2017 17:17:18

Да, есть такое когда повисаешь)) Трудно в учении легко в бою!)))

Vitalii_Koval · 27.Декабрь.2017 22:14: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{
display: flex;
justify-content: space-between;
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;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 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);
}

.miss .lever {
display: none;
}

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

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

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

wanderer · 28.Декабрь.2017 18:06:53

Последний ответ на 100%. В последних трех CSS правилах можно вместо класса target использовать тег li. Покороче. Совершенствованию нет предела.

GlebPilipenko · 16.Январь.2018 20:13:27

код на 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 {
display: flex;
justify-content: space-between;
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;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}

.lever {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}

.shooter-1 li:nth-child(3n+1) .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);
}

.shooter-1 li:nth-child(3n+1) span,
.shooter-2 li:nth-child(2) span,
.shooter-2 li:nth-child(3) 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(3n+1) span,
.shooter-2 li:nth-child(2) span,
.shooter-2 li:nth-child(3) span {
top: 10px;
left: 9px;
}

понимание пришло далеко не с первого раза, но такие задания закаляют в бою!
спасибо за задачку)

VladislavDodonov · 24.Март.2018 11:56:42

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 {
display: flex;
justify-content: space-between;
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;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 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);
}

.miss .lever {
display: none;
}

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

Micro4elik · 19.Апрель.2018 22:59:51

Поначалу на*****кодил, но получил нужный результат (без использования “display: none” и меняя некоторые свойства, хотя в задании было сказано их не трогать), потом залез на форум и понял, что можно сделать в разы проще(даже удалить ненужные строчки из сток-варианта), получилось вот это

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 {
display: flex;
justify-content: space-between;
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;
width: 22px;
height: 22px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 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);
}

.miss .lever,
.shooter-2 li:first-child .lever,
.shooter-2 li:nth-child(1n+4) .lever {
display: none;
}

madmuks999 · 16.Май.2018 09:45:27

поясните пожалуйста в коде выбор ячеек (1n+4) ??? (3n+1) ???

подробнее пожалуйста.
спасибо

Valery_S · 16.Май.2018 14:48:19

https://htmlacademy.ru/demos/2#step7
Введите там эти значения – получите наглядное представление…

Brevnout · 01.Июнь.2018 09:49:50

Еще вариантик)))
.shooter-2 li:nth-child(-3n+4) .lever,
.shooter-2 li:last-child .lever

ElyosMaximus · 15.Июнь.2018 00:38:40

Было бы понятнее если бы вместо кода в background-color использовались английские слова например: black или white.

Valery_S · 18.Июнь.2018 01:03:45

Цвет по коду можно определить какой-нибудь программкой типа ColorMania.

В комментариях к свойствам добавляете для удобства названия:

.shooter-1 {
    padding: 55px 0 55px 0;
    border-bottom: 1px dashed #cccccc;    /* какой-то сероватый */
    background: #fcf8e3;                  /* какой-то бежеватый */
}

Названия цветов можно подобрать здесь: http://www.spravkaweb.ru/html/pril/color

slai98 · 26.Июль.2018 20:15:38

Всем привет! Не очень понял смысл двух дивов, а тем более спанов. Когда для shooter-2 делаем задвижки (если использовать именно hitbox) полностью закрываются только 2 и 3 (подозрительно, так как в примере именно они и должны быть закрыты), а остальные закрываются не до конца. Как это можно объяснить?

Olia · 05.Август.2018 12:04:21

Кто-нибудь, поясните пожалуйста, как работает эта строчка кода?
Какой результат она дает я вижу на примере, но как это работает никак не могу сообразить

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