Привет всем,прошел испытание “Дуэль” (18/18),вопросы и пожелания по нему:
Сразу скажу,я решал не сам,я копипастил и анализировал:)
1е-согласен с большинством,что практика несколько расходится с теорией,в отличии от предыдущих заданий.
2- все таки с комментариями к свойствам в ксс было бы намного проще и целомудреннее,ибо цель курса-выучить селекторы,а не свойства ксс, это немного разные,не пересекающиеся цели на мой взгляд.
3-Критикую то,как были нарисованы модели мишеней в ксс, упомянутое свойство “{margin-right: 0;}” совсем сбило с толку,в итак сложном задании. + Почему то модели были так устроены,что нельзя было выделить белые мишени из черных (я зебра черная,в полоску белую)).Хотя белых было меньше,а значит выделить их по дефолту легче,и главное,так мыслит непосвященный новичок,вроде меня. Я до сих пор не понимаю,почему пришлось делать иначе.
4-Почему то ножки белых мишеней (span) при неправильных ИДЕНТИЧНЫХ предыдущих селекторах вставали криво,правее чем нужно. Тут я снова в догадках,почему классы “lever” и “hitbox” нельзя поменять местами. Наверно я чего то не догоняю.
5-Я тотально не понял эту строчку,как 1 строчкой мы выбиваем сразу 3 зайцев?
".shooter-1 .miss span,
.shooter-1 .miss .lever"
А в целом,как всегда,интересные задания
Это распространенная практика, когда каждому элементу задается отступ справа, а у последнего отступ обнуляется ,чтобы элементы помещались в одну строку.
Нет белых и черных, они все одинаковы. Каждая состоит из двух слоев (белого и черного). Только у некоторых второй слой спрятан с помощью display: none;
Нельзя поменять, ведь это разные элементы, а общее свойство у них только border-radius.
Здесь нужно внимательно посмотреть на html-код. Все незакрытые мишени первого стрелка (2, 3, 5) имеют класс .miss, поэтому их можно выбрать по классу.
Про отступ справа я понял,просто сходу не догадался,зачем писать свойство,которое и так по дефолту равно 0 ))
Вот,не знал как устроены модели,подумал что они уже готовые,и их только правильно подставить надо, используя комбинации селекторов,что по смыслу ближе к заданию
а ну да,свойство “позиция” влияет,это была подсказка,не подумал)
Насчет levet и hitbox, вы не поняли, в html у каждого класса,у кого есть lever,есть и hitbox, то есть на первый взгляд нет разницы,какой класс подставлять вместо исходного слова “селектор”. только работает почему то только 1 из вариантов,как я понял
Про мисс понял,не заметил этот класс,только почему нельзя было тоже самое прописать для 2го стрелка? у него тоже есть класс мисс
А что в принципе делает span? (гугл не помог)
в ксс я понял,что добавляет ножки мишеням,а в html он зачем,он же пустой,все равно как селектор работает?
“Ножка” как отдельный элемент в коде. В принципе это мог быть псевдоэлемент, но тогда css-код был бы еще более непонятным. Поэтому так - пустой элемент в html.
Пройдя курс еще раз,я понял,о чем вы говорили, почему нельзя поменять .lever и .hitbox местами, потому что некоторые параметры (box shadow наверно,если конкретно) span,который лежит в .lever зависят именно от родителя (в данном случае lever) а ели назначить .hitbox, то параметры теряются,т.к. .hitbox не родитель. НО БЛИН, МЫ НА ТОТ МОМЕНТ ТАКИЕ ТОНКОСТИ НЕ ЗНАЛИ!))
Я правильный вывод сделал?
про зависимость от родителей - правильно, а вот со свойством не угадали. Это не box-shadow (оно - родителенезависимое), a position: absolute; у span. При абсолютном позиционировании точка отсчета координат привязывается к ближайшему спозиционированному родителю. Поэтому если мы зададим те свойства, которые описывают серый круг (в числе них есть и позиционирование) для .lever, то мы “привяжем” палочку-ножку к кругу, и при смещении круга ножка будет двигаться за ним. А если мы поменяем свойства для .lever и .hitbox местами (т.е. серый круг отдадим .hitbox, а для .lever останется черный кружок без позиционирования), то ближайшим спозиционированным родителем для span будет li - точка отсчета координат чуть сместиться (видно, что ножка оказывается чуть-чуть правее), а главное - исчезнет привязка к серому кругу.
Да, позиционирование будет проходиться позже, но здесь, наверное, мы должны были обратить внимание на то, что в одном случае ножка идеально центрируется относительно круга, а в другом - оказывается чуть смещена в сторону от центра круга. Ну и заодно обратить внимание на то, в каком порядке (от родительских элементов - к дочерним) описываются CSS-свойства
