Такой вопрос ,-
данное испытание,это лишь тень того , что предстоит в профессиональной веб-разработке ?? если решил освоить данную проф область и в будущем работать в данном ремесле.(попытаться)
3 день не могу сделать самостоятельно , ответы смотрел краем глаза (не хочу списывать),я уже выучил почти наизусть свойства селекторов,какой - за что отвечает. перепроходил сам курс заново, с 1 до 17 , назначение и смысл каждого селектора - понимаю. но как только попадаю на 18/18 , просто теряюсь и вновь перечитываю все знакомые свойства и пытаюсь,подобно взлому шифра от сейфа,правильно сопоставить селектора.
Ну и вопрос , есть ли смысл продолжать учиться , если впритык не понимаю это Испытание (дальше будет только сложнее) ? или ввиду того,что данное испытание, сильно - абстрактное , можно скопировать правильный шифр селекторов и идти дальше ? т.к, в реальных работах/проектах , такая абстрактность практически отсутствует.
Или у меня , ввиду того, что это Испытание не поддается , грубо говоря,“мозгов не хватит” ? 
Нет, всё у вас в порядке. Это задание у многих вызывает трудности. Но оно не такое абстрактное, как может показаться на первый взгляд.
Попробуйте разобрать пример кода с форума, если не получится - временно оставьте задание.
Когда после курсов “Сетки” и “Позиционирование” вы вернётесь к этому заданию, то посмотрите на него совсем другими глазами.
как и говорили,вернулся спустя некоторое время,с каким,никаким,но с багажем знаний,прошелся еще раз по данному курсу,все равно сложновато из-за метода решения ( он же - подбор селекторов).
долго думал,как ножку прилепить к леверам…увидел у левера спан,интуитивно добавил его и вуаля 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;
}
.shooter-1 li:nth-child(1) .lever, .shooter-1 li:nth-child(4) .lever ,.shooter-2 li:nth-child(n+2):nth-child(-n+3) .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);
}
.shooter-1 li:nth-child(1) .lever span, .shooter-1 li:nth-child(4) .lever span ,.shooter-2 li:nth-child(n+2):nth-child(-n+3) .lever 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);
}
{
display: none;
}
selector {
display: none;
}
selector {
display: none;
}
selector {
display: none;
}
Ваш багаж знаний усложнил селекторы)
Последние четыре надо тоже использовать.
Присмотритесь к html-коду, в коде мишеней первого стрелка есть класс .miss.
Может он тоже для чего-то нужен?
на .miss я обратил внимание,но увидел что у второго стрелка его нет,решил пропустить.
а вот , по поводу последних 4-ех селекторов,решил игнорировать,путем создания более сложных nth-child селекторов,дабы сократить код,что-бы не обращаться к 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 {
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);
}
.lever 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(n+4):nth-child(-n+5) .lever{
display: none;
}
selector {
display: none;
}
selector {
display: none;
}
Нецелесообразно пользоваться целыми формулами, если осталось выбрать всего две мишени. Проще обратиться по конкретным номерам. А так этот вариант лучше предыдущего.
а каким способом , лучше указать - закрашивание элементов, идущих подряд по списку , вместо -
“shooter-2 li:nth-child(n+4):nth-child(-n+5) .lever” , указать -
".shooter-2 li:nth-child(4) .lever , .shooter-2 li:nth-child(5) .lever" получается длиннее же.
Вот максимально оптимизированный код
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 ul li:first-child > .lever {
display: none;
}
.shooter-2 ul li:nth-child(4) .lever {
display: none;
}
.shooter-2 ul li:last-child .lever {
display: none;
}
В данном случае можно без >
вы уверены что это максимально оптимизированный? тогда расскажите, зачем вам здесь вот эта часть селектора > ul ? Зачем вы здесь вообще используете дочерние селекторы? У вас есть ещё какой-то вложенный .lever, который не является дочерним к li?
А ну да можно и без них. Но это наверно лучше всяко чем ".shooter-1 li:nth-child(1) .lever span, .shooter-1 li:nth-child(4) .lever span ,.shooter-2 li:nth-child(n+2):nth-child(-n+3) .lever span "
лучше , тем, что проще читать ?
ваш код толще на 2 селектора,а это - не пара строчек.
@Ineska , где истина ? )[quote=“stiglitZzz, post:7, topic:4889”]
а каким способом , лучше указать - закрашивание элементов, идущих подряд по списку ,вместо “shooter-2 li:nth-child(n+4):nth-child(-n+5) .lever” или “.shooter-2 li:nth-child(4) .lever , .shooter-2 li:nth-child(5) .lever”
[/quote]
вопрос еще в силе. есть иные варианты решения , в один селектор ?
Краткость кода - это еще не всё. При этом он должен быть максимально понятен и удобно читаем. Поэтому внизу есть эти четыре селектора.
Поэтому код @ardasovvadim лучше, чем ваш. Формулы :nth-child используются при большом массиве данных, когда выделение определенных элементов можно проследить как закономерность. (как в курсе “Селекторы. Часть2”)
А так “горе от ума” получается. Не усложняйте селекторы.
Спасибо! )
Застряв на этом испытании, после трех дней заседаний, решил сравнить код тех кто успешно прошел.
При построчном сравнении увидел что CSS-код участника @ardasovvadim содержит самовольные модификации (например удалена строка «display: flex;» и есть еще переделки), хотя в задании четко сказано только расставить селекторы, без вмешательства в свойства.
Поэтому на мой взгляд, его код ставить в пример новичкам нельзя - сбивает с толку.
Исходный код испытания недавно поменялся, старый вариант задания и решения отличается от нынешнего.
У меня испытание тоже вызвало затруднения, пришлось почти весь рабочий день на него потратить. Проходил уже с обновленным исходным кодом (обновление вышло совсем недавно, насколько я понял). Получил 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;
}
selector {
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 {
display: none;
}
.shooter-2 li:nth-child(4) .lever {
display: none;
}
.shooter-2 li:nth-child(5) .lever {
display: none;
}
И еще, во время прохождения встал вопрос - зачем нам следующие строки:
selector {
margin-right: 0;
В этой теме увидел, что люди пишут там примерно следующее:
li:last-child {
margin-right: 0;
}
Но что же это дает? Заранее спасибо за ответы.
В старом варианте решения
li:last-child {
margin-right: 0;
}
был нужен, чтобы сбросить отступ, который задавался для всех мишеней li. Теперь же отступа такого нет, и в этом правиле больше нет необходимости.
Спасибо за вопрос, это правило осталось в решении по ошибке. Теперь его так больше уже нет.
почему в финальном испытании
в селекторах с правилом - dispaly: none
срабатывает селектор - .shooter-2 li:first-child .lever
а , к примеру, селектор - .shooter-2 .lever:first-child не срабатывает?
потому что этот селектор выберет внутри shooter-2 все элементы с классом lever, которые являются первыми в списке потомков своего родителя. Родителем для .lever будет li, но внутри li .lever всегда идет после .hitbox, т.е. является вторым, а не первым. поэтому ваш селектор никого и не находит