Можно, конечно.
Задание показалось очень сложным,благодаря вам смог пройти испытание,а так же разобрался,что и как устроено,спасибо)!
1 лайк
Спасибо большое за ваше подробное объяснение этого сложного для меня задания.
1 лайк
Спасибо за очень подробный разбор:grinning:
1 лайк
ухх, спасибо за разбор, голова пухла очень сильно) Всё решил, вроде как понял, но парочка вопросов осталась (буду ссылаться на решение, указанное здесь):
- Расположение вот этих серых ножек, свойства которых добавлены тегу span. Если подставить span к соответствующим свойствам, но не подставлять класс .lever к скобке выше, то ножки будут смещены вправо от кружочка. А если добавить .lever, то они становятся как нужно. Вот эта часть кода, если без .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);
}
Я правильно понял, что расположение ножек span будет зависеть от родительского элемента - div с классом .lever, так как у него указано свойство position: absolute. Если бы не это, то от чего считалось бы расположение ножек span?
- В решении задачи свойства, задающие прямоугольник с белым фоном, были добавлены к классу .target. Я поставил их к тегу ul и всё было также. То есть в данном случае можно так. Но если бы в задаче были другие списки ul с другим оформлением, то лучше всё же подставить .target, а ещё лучше ul.target?
2й вопрос - да. Любой из селекторов в данном случае сработает, но если учитывать возможность появления других списков, то лучше обращаться к списку через класс .target или конкретно к ul.target.
1й вопрос.
Затрудняюсь ответить почему они смещаются вправо если убрать .lever.
Сама еще не до конца разобралась с позиционировнаием, но скорее всего span спозиционирован относительно li с position: relative;
Может кто-то сможет дать более точный ответ на 1й вопрос)
Ответ на 1-й вопрос: и lever, и span имеют абсолютное позиционирование. И ОБА они привязаны к БЛИЖАЙШЕМУ родительскому элементу, которому задано ОТНОСИТЕЛЬНОЕ позиционирование. И это будет li. Чтобы это было наглядно, задайте li, .hitbox, .lever, span свойство outline: 1px solid red;, а затем элементам с абсолютным позиционированием top: 0; left: 0; (не забудьте временно отключить те координаты, которые им заданы изначально). И Вы чётко увидите привязку. Если li не имело бы position: relative;, то ближайшим родителем для этих элементов стало бы окно браузера (в данной задаче).
2 лайка
Именно то, что мне нужно было! Никак не могла понять логику выполнения, а оказывается заходила абсолютно с другой стороны.
Возвращалась к заданию несколько раз и, из раза в раз, упиралась в оду и ту же ошибку!
Спасибо автору за разъяснения!
для наглядности. не знаю, вдруг кому-то поможет
Хочу еще сказать, что это было очень сложное задание для моего воображения, я не знаю, это специфика восприятия такая (программист не программист)? Т.е. у меня конечно есть легкое ощущение собственной тупости, но так же есть надежда, что все-таки это действительно сложно задание было… по уровню. Я сделал, но не скажу, что я на все 100% понял, что я делал 2 дня. Самое сложное для меня было понять порядок св-в, т.е. этот селектор хитбокс или селектор левер, в остальном полегче, нужно применить пройденные знания
7 лайков
умничка
да… если бы не добрые люди тут, не получается самому сделать задание((
Вообщем копался в коде часа 3, отчасти решил пока не дошло до класса .lever, но все таки заглянул, спросить бывалых. Заюзал код который был в заглавной теме, все равно на 100 не пройти, не пойму почему… фото прилагаю > Фото
upd: приложил усилия, и получилось пройти на 100% http://prntscr.com/fp796f главное правильно задать порядок класов, а так же спасибо vic4884
Спасибо за код, мне помогло, а то уже мозги начали вскипать конкретно!
Обалдеть как просто. Мне казалось что нужно для каждого круга задать определенные условия, а по факту мы ставим для всех общие условия, а остальное скрываем. Что если не использовать скрытое св-во? То есть под черными кругами у нас скрываются белые (промахи). А если их убрать? Что бы по факту черные круги не были наложением на белые. Исходя из такой логики и не мог решить задачу. Так можно как-нибудь модернизировать код?
Хотелось бы уточнить правильно ли я все понял:
- shooter-2 является родителем для списка ul, а все остальные его потомки.
- ul является дочерним элементом shooter-2,
- li является дочерним элементом ul и потомком для shooter-2,
- div(ы) внутри li являются дочерними элементами для li и потомками по отношению ко всем предыдущим тегам (ul и shooter-2)
а со span(ами) не очень уверен. они дочерние для списка или div(а?) являются ли спаны потомком для всех предшествуюших li тегам?
Автору большое спасибо)
Дочерние элементы и “потомки” - это одно и то же. Есть еще “соседние” элементы, которые расположены на одном уровне вложенности в рамках одного ближайшего родителя.
Примером соседей в коде задания можно считать элементы li.
Понял, спасибо:slight_smile:
А что на счет спана? Он потомок div или li? И будет ли спан потомком для shooter-2 или он будет потомком только для предыдущего тега?
span будет потомком для li, для div.lever и для .shooter-2 тоже.
благодарю 
Спасибо! Что-что, а это испытания я сам не прошёл(