Подскажите почему с классом shooter-1 конструкция не работает, а с shooter-2 работает?
В итоге сделал так:
Но все же хочу понять в чем причина. В моем понимании в конструкции с “shooter-2” был обозначен класс класса, а значит это в приоритете над остальным списком, потому был закрашен 1 красный круг, а все остальные элементы списка не могут переопределить первый и поэтому закрасились в белый. Однако эта логика не подходит для первого класса.
Где ошибка? В моей логике - не правильно понял приоритетность или в системе?
Какое конкретно правило по вашему мнению ведет себя неадекватно?
P.S. Надеюсь, вы понимаете, что запись .shooter-1 .second, .fifth затрагивает пятую мишень и второго стрелка тоже.
Разве можно обратиться к 3 мишени 2 стрелка через класс первого? Не знал этого… Почему так происходит?
Мне казалось это воспринимается как “все вторые и пятые классы класса 1 стрелка”.
Тогда как правильно? Обращаться к каждой мишени лично?
Вы обращаетесь к мишени второго стрелка не через первого в этом случае.
.shooter-1 .second, .fifth
Между селекторами стоит запятая. Второй селектор выбирает просто пятую мишень. Но пятая мишень есть у обоих стрелков. Получается, что выбираете обе пятые мишени.
Теперь понял в чем моя ошибка. Мне казалось что через запятую можно перечислить несколько селекторов и я не знал что селектор, идущий после запятой относится ко всем классам.
А в остальном я правильно понял, что если указать класс класса и применить к нему селектор “1”, а затем указать все остальные элементы того же класса и дать ему селектор “2”, то последний селектор не переопределит “1”?
пример:
.shooter-1 .fifth {
background-color: red;
}
Да, вы правильно поняли. Второе правило идет ниже по коду, поэтому оно переопределяет первое.
Об этом целый курс у вас будет дальше - “Наследование и каскадирование”
А еще подскажите пожалуйста почему в таком случае не происходит переопределения?
.shooter-2 .first {
background-color:red;
}
.shooter-2 li{
background-color:white;
}
В таком случае первое что выполняется - это закраска 1 мишени в красный, а затем идет обращение ко всем элементам списка, в т.ч. и к 1, а значит он должен переопределиться, ведь правило для всех элементов списка идет ниже первого правила. Но этого не происходит, почему?
Или первая мишень игнорируется потому что было явно указано для нее правило и система считает только оставшиеся элементы?
Еще одно обстоятельство не учли мы с вами - уровень специфичности селектора. Об этом тоже будет в другом курсе. Селектор из двух классов “тяжелее” чем селектор класса + элемент (тег).