Сначала написал:
.target {background: white;} Почему так не сработало?
Классы для всех мишеней расположены внутри тега с классом target.
В итоге написал:
li {background: white;}
Потому что мишени - li. А target - ul. “Стреляем” по мишеням - по li.
Но <li> вложен в <ul>. Если через .target я установил белый фон, то и в <li> он должен быть белым. Или это разные вещи? Каким еще способом можно покрасить мишени?)
Ну смотри, li - это объект, которому задается цвет с помощью background. Если задать background ul - получим мишени на красном фоне, но не красные мишени. Попробуй сам, пропиши target красный фон.
Попробовал. Понятно теперь )
Про способы: если про селекторы, то можно с помощью псевдоклассов покрасить (если еще про них не знаешь, значит узнаешь, я просто забыл ход программы). А если про принцип: в рамках задания красить нужно background’ом.
1 лайк
По 5/18 Контекстные селекторы
У меня вот такой код
.shooter-1 .second, .shooter-1 .fifth, .shooter-2 .first {
background-color:red;
}
.shooter-1 .first,
.shooter-1 .third,
.shooter-1 .fourth,
.shooter-2 .second, .third, .fourth, .fifth {
background-color:white;
}
И вопрос: Почему не работает, если в первом правиле для класса fifth не указывать .shooter-1 а просто через запятую? То же самое во втором правиле - почему работает только с указанием >shooter-1 для каждого класса, а для .shooter-2 работает и если классы перечислены через запятую?
Если в первом правиле для класса .fifth не указывать его “предка” .shooter-1, то правило и применяться будет к любму .fifth, неважно, вложен он в .shooter-1 или в .shooter-2.
Во втором правиле вам нужно понять, что через запятую перечисляются именно селекторы, а не их части:
.shooter-1 .first - один селектор, задающий правило для элемента класса .first, вложенного в элемент класса.shooter-1.
.first - другой селектор, задающий правило для любого (!) элемента класса .first, безотносительно его вложенности в другие элементы.
Поэтому правила
.shooter-1 .first, .third{X}
и
.shooter-1 .first, .shooter-1 .third {X} - не равнозначны.
Первое правило применит свойсто X к:
- тегу с классом .first, находящемуся внутри тега с классом .shooter-1;
- любому тегу с классом .third, встреченному в теле html-кода (в нашем случае, и к .third в .shooter-1 и к .third в .shooter-2).
Второе правило применит X к тегу с классом .first и тегу с классом .third, находящимся только (!) в теге с классом .shooter-1.
Поэтому shooter-1 для каждого класса нет необходимости отмечать. Правило вида
.shooter-1 .first, .third, .fourth… {}
вполне адекватно работает, а его результат удовлетворяет условиям задания: ведь третья и четвёртая мишени у нас белые как у первого стрелка, так и у второго. Правда, тогда отпадает необходимость дублировать эти селекторы, как в вашем примере:
правило .shooter-1 .first, .third, .fourth, .shooter-2 .second, .third, .fourth, .fifth {} — избыточно.
.shooter-1 .first, .third, .fourth, .shooter-2 .second, .fifth {} - этого вполне хватит.
4 лайка
Спасибо за такое подробное и понятное объяснение. Все равно правда пришлось перечитать несколько раз)), но теперь все стало на свои место. Спасибо!
Рад, что помог разобраться.
Но и вам тоже спасибо: отвечая на вопросы, можно лучше разобраться в теме, закрепить изученное, даже узнать что-то новое.
Кстати, нашёл в своём комменте опечатку (уже исправил):
вместо > (в нашем случае, и к .second в .shooter-1 и к .third в .shooter-2).
надо > (в нашем случае, и к .third в .shooter-1 и к .third в .shooter-2).
Надеюсь, эта моя ошибка не ввела вас в заблуждение.
1 лайк
Нет, Ваша опечатка не ввела меня в заблуждение, т.к. когда я перечитывала Ваше сообщение, у меня не был открыт минибраузер, и я не пробовала ввести и увидеть. Мне важно было понять суть, а суть оказалась в том, что я реально не понимала, что .shooter-1 .first и .third это разные селекторы, даже если запись имеет вид .shooter .first, .third , а поэтому свойства применится к .third в любом шутере. Вот этого я не могла осознать.
Тему “Селекторы” прохожу второй раз. Я бы всем, у кого были проблемы с испытанием, посоветовала пройти ее еще разок, а если понадобиться то и еще разок). Мне кажется, сейчас, во второй раз, я пишу более корректные и менее избыточные правила в заданиях.
2 лайка
Да, все правильно) Рад за вас)
Не будет сильной ошибкой, если белый фон давать вначале сразу всем десяти li элементам, а потом вторым CSS-правилом просто перезадать новое значение для 3-x из них?
li { background-color: white; }
.shooter-1 .second,
.shooter-1 .fifth,
.shooter-2 .first { background-color: red; }Нет, ошибкой это не является.
Такой подход довольно логичен и имеет право на существование.
1 лайк