Ошибка при группировке сложных CSS селекторов
Все, что разделено запятой при группировке, должно представлять собой полноценный селектор. Давайте посмотрим, где здесь можно ошибиться.
Пусть у нас есть вот такой код:
#block h2 {
color: red;
}
#block h3 {
color: red;
}
Давайте сгруппируем два селектора в один. Вот правильный вариант группировки:
#block h2, #block h3 {
color: red;
}
А вот неправильный вариант группировки:
#block h2, h3 {
color: red;
}
В этом неправильном варианте группировки
новичкам почему-то кажется, что #block
относится и к h2, и к h3, стоящему
после запятой. Но селекторы не действуют
через запятую и фактически этот неправильный
вариант группировки можно переписать вот так:
#block h2 {
color: red;
}
h3 {
color: red;
}
Сравните с изначальным вариантом, который мы начали сокращать:
#block h2 {
color: red;
}
#block h3 {
color: red;
}
Упростите код, используя группировку селекторов:
#block h1 {
text-align: center;
}
#block h2 {
text-align: center;
color: blue;
}
#block h3 {
text-align: center;
font-size: 16px;
color: red;
}
Упростите код, используя группировку селекторов:
#block h1.eee {
text-align: center;
font-size: 30px;
}
#block h2.zzz {
text-align: center;
font-size: 20px;
}
Упростите код, используя группировку селекторов:
.xxx .kkk {
text-align: center;
}
.eee h2.zzz {
text-align: center;
}
#eee h2 {
text-align: center;
}
Упростите код, используя группировку селекторов:
.eee h2.zzz {
text-align: center;
}
.xxx {
text-align: center;
}