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

Bamsi · 29.Март.2017 08:42:08

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),
.shooter-2 li:nth-child(4),
.shooter-2 li:last-child{
    display: none;
}

selector {
    display: none;
}

selector {
    display: none;
}

И что у меня не так?? Я уже голову сломал? Отображается дрянь какая-то(((

Ineska · 29.Март.2017 09:29:00

Пробел забыли.
Обратите внимание, что для мишеней первого стрелка вы скрываете только .lever, а для мишеней второго стрелка вы убираете мишень полностью.

AlexFrost · 03.Апрель.2017 15:57:02

Здравствуйте! С самого начала задания 5-ая мишень отображалась под 1-ой и так во всех заданиях с биатлоном. Браузер опера. Путем изменения ширины и отступов в теге ul удалось добиться прохождения на 98%, но в “Различиях” мое поле шире… Как добиться результата в 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;
}

ul {
width: 225px;
height: 25px;
margin: 0 auto;
padding: 10px 0px 10px 25px;
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;
}

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

Ineska · 03.Апрель.2017 17:04:05

Правило без селектора осталось у вас.

AlexFrost · 04.Апрель.2017 03:49:00

если задать
li:last-child {
margin-right: 0px;
}
то ничего не меняется

Ineska · 04.Апрель.2017 05:45:11

В задании нельзя было трогать сами свойства, а вы так делали, причем не раз.
Сбросьте код и расставляйте только селекторы.
Что касается последней мишени, то о проблеме разработчикам известно: Селекторы, часть 1 / Испытание. Дуэль. [18/18]

AlexFrost · 04.Апрель.2017 06:54:48

Благодарю за ответ!

Michael_Yanchilenko · 30.Июль.2017 07:42:35

100%, может кому-то будет полезен.
body {
width: 280px;
margin: 0;
padding: 0;
}
div.shooter-1 {
padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;
}
div.shooter-2 {
padding: 55px 0 55px 0;
background: #d9edf7;
}
ul.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;
}
div.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
div.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);
}
ul.target li.miss div.lever {
display: none;
}
ul.target li:first-child div.lever {
display: none;
}
div.shooter-2 ul.target li:nth-child(4) div.lever {
display: none;
}
div.shooter-2 ul.target li:last-child div.lever {
display: none;
}

Ineska · 30.Июль.2017 07:48:15

Необязательно писать селекторы таким образом. Можно писать просто:
.hitbox
.target
.lever
и т. д.

Michael_Yanchilenko · 01.Август.2017 09:48:27

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

Ineska · 01.Август.2017 13:49:56

Не соглашусь) Ваша запись уместна, только если есть разные элементы с одним и тем же классом. Например, div и ul имеют класс target. А в стилях вы уточняете, что нужно выбрать только ul. Поэтому пишете ul.target.

Zubkov_v_twi · 05.Июль.2018 17:32:31

Mart · 23.Март.2020 20:11:21

Можете пожалуйста обьяснить. Почему в данном задании, в самом конце если мы пишем

.miss .lever {
display:none;
}

То отображение отключение затрагивает только первого стрелка и не отключится у второго. Почему так? Мы же указываем класс .lever вложенный в класс .miss, что является актуальным для обоих стрелков. Что я не понимаю?

stashek · 31.Март.2020 20:21:03

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

.shooter-1 {
padding: 55px 0 55px 0;

background-color: #fcf8e3;
border-bottom: 1px dashed #cccccc;
}

.shooter-2 {
padding: 55px 0 55px 0;

background-color: #d9edf7;
}

.target {
display: flex;
justify-content: space-between;
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
overflow: hidden;

list-style: none;

background-color: white;
border-radius: 2px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

li {
position: relative;

width: 22px;
height: 22px;

font-size: 0;

background-color: #333333;
border: 1px solid black;
border-radius: 50%;
}

.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;

background-color: #999999;
border-radius: 50%;
}

.lever {
position: absolute;
top: -2px;
left: -2px;

width: 26px;
height: 26px;

background-color: #f5f5f5;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

span {
position: absolute;
top: 12px;
left: 11px;

width: 5px;
height: 25px;
100%
background-color: #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;
}

RZX83 · 12.Апрель.2020 15:36:10

На конечном шаге, когда необходимо было спрятать 6 рычагов, начитавшись в сети про псевдо-селекторы, я успел пройти путь от наипростейшего решения до максимально извращенного

/* =-=-=-=-= Прячем рычаги =-=-=-=-= */  
            
.shooter-1 li:nth-child(-n+3):nth-child(n+2) .lever,
.shooter-2 li:nth-child(-3n+4) .lever,
li:last-child .lever { 
  display: none; 
}

Или вот так еще можно:

.shooter-1 li:nth-child(-5n+999999997) .lever,
.shooter-1 li:nth-child(-5n+999999998) .lever,
.shooter-2 li:nth-child(-3n+4) .lever,
li:last-child .lever { 
  display: none; 
}

весь css-код испытания "Дуэль"

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

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

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

.target {
display: flex;
justify-content: space-between;
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
overflow: hidden;
list-style: none;
background-color: white;
border-radius: 2px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

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

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

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

span {
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background-color: #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(-n+3):nth-child(n+2) .lever,
.shooter-2 li:nth-child(-3n+4) .lever,
li:last-child .lever {
display: none;
}

/.shooter-1 li:nth-child(-5n+999999997) .lever,
.shooter-1 li:nth-child(-5n+999999998) .lever,/

Glazgo · 09.Июль.2020 18:47:50

класс .miss есть только у первого стрелка

Annaice · 31.Август.2020 22:21:39

100% было на момент 09.01.2020 (без каких либо изменений в коде, только селекторы)

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

.shooter-1 {
padding: 55px 0 55px 0;

background-color: #fcf8e3;
border-bottom: 1px dashed #cccccc;
}

.shooter-2 {
padding: 55px 0 55px 0;

background-color: #d9edf7;
}

.target {
display: flex;
justify-content: space-between;
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
overflow: hidden;

list-style: none;

background-color: white;
border-radius: 2px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

li {
position: relative;

width: 22px;
height: 22px;

font-size: 0;

background-color: #333333;
border: 1px solid black;
border-radius: 50%;
}

.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;

background-color: #999999;
border-radius: 50%;
}

.lever {
position: absolute;
top: -2px;
left: -2px;

width: 26px;
height: 26px;

background-color: #f5f5f5;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

span {
position: absolute;
top: 12px;
left: 11px;

width: 5px;
height: 25px;

background-color: #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;
}

Shapogolik · 20.Май.2021 05:52:34

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

.shooter-1 {
padding: 55px 0 55px 0;

background-color: #fcf8e3;
border-bottom: 1px dashed #cccccc;
}

.shooter-2 {
padding: 55px 0 55px 0;

background-color: #d9edf7;
}

ul {
display: flex;
justify-content: space-between;
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
overflow: hidden;

list-style: none;

background-color: white;
border-radius: 2px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

li {
position: relative;

width: 22px;
height: 22px;

font-size: 0;

background-color: #333333;
border: 1px solid black;
border-radius: 50%;
}

.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;

background-color: #999999;
border-radius: 50%;
}

.lever {
position: absolute;
top: -2px;
left: -2px;

width: 26px;
height: 26px;

background-color: #f5f5f5;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
span {
position: absolute;
top: 12px;
left: 11px;

width: 5px;
height: 25px;

background-color: #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:last-child .lever,
.shooter-2 li:nth-child(4) .lever{
display: none;
}

User_4815162342 · 06.Июнь.2021 20:04:54

Решил задачу на 100%, так и не дойдя до последних четырех CSS-правил.
Код получился наверное не самый красивый, но вдруг кому интересно -

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

.shooter-1 {
padding: 55px 0 55px 0;

background-color: #fcf8e3;
border-bottom: 1px dashed #cccccc;
}

.shooter-2 {
padding: 55px 0 55px 0;

background-color: #d9edf7;
}

.target {
display: flex;
justify-content: space-between;
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
overflow: hidden;

list-style: none;

background-color: white;
border-radius: 2px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

li {
position: relative;

width: 22px;
height: 22px;

font-size: 0;

background-color: #333333;
border: 1px solid black;
border-radius: 50%;
}

.miss .lever,
.shooter-2 li:nth-child(1) .lever,
.shooter-2 li:nth-child(4) .lever,
.shooter-2 li:nth-child(5) .lever {
width: 10px;
height: 10px;
margin: 6px auto;

background-color: #999999;
border-radius: 50%;
}

.shooter-1 li:nth-child(1) .lever,
.shooter-1 li:nth-child(4) .lever,
.shooter-2 li:nth-child(2) .lever,
.shooter-2 li:nth-child(3) .lever {
position: absolute;
top: -2px;
left: -2px;

width: 26px;
height: 26px;

background-color: #f5f5f5;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.shooter-1 li:nth-child(1) .lever span,
.shooter-1 li:nth-child(4) .lever span,
.shooter-2 li:nth-child(2) .lever span,
.shooter-2 li:nth-child(3) .lever span {
position: absolute;
top: 12px;
left: 11px;

width: 5px;
height: 25px;

background-color: #f5f5f5;
box-shadow: -1px 15px 2px rgba(0, 0, 0, 0.3), 1px 15px 2px rgba(0, 0, 0, 0.3);
}

selector {
display: none;
}

SekLedge · 16.Август.2021 17:40:02

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

.shooter-1 {
padding: 55px 0 55px 0;

background-color: #fcf8e3;
border-bottom: 1px dashed #cccccc;
}

.shooter-2 {
padding: 55px 0 55px 0;

background-color: #d9edf7;
}

.target {
display: flex;
justify-content: space-between;
width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
overflow: hidden;

list-style: none;

background-color: white;
border-radius: 2px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

li {
position: relative;

width: 22px;
height: 22px;

font-size: 0;

background-color: #333333;
border: 1px solid black;
border-radius: 50%;
}

.hitbox {
width: 10px;
height: 10px;
margin: 6px auto;

background-color: #999999;
border-radius: 50%;
}

.lever {
position: absolute;
top: -2px;
left: -2px;

width: 26px;
height: 26px;

background-color: #f5f5f5;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.lever span {
position: absolute;
top: 12px;
left: 11px;

width: 5px;
height: 25px;

background-color: #f5f5f5;
box-shadow: -1px 15px 2px rgba(0, 0, 0, 0.3), 1px 15px 2px rgba(0, 0, 0, 0.3);
}

body .miss .lever {
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;
}