Селекторы используются для выбора html элементов, для которых нужно описать css правила. Если несколько селекторов имеют одинаковые правила, то их можно сгруппировать вместо, чтоб сэкономить место и не описывать одно и тоже правило несколько раз. При группировке селекторов они отделяются запятой ",". Разрешается также использовать селектор неоднократно в разных описаниях. Например:
-
h1, h2, h3, h4 {
-
padding:1em;
-
}
-
.highlight p, .highlight ul {
-
margin-left:0.5em;
-
}
-
#main p, #main ul {
-
padding-top:1em;
-
}
Есть 2 распространенные ошибки, которые допускаются при попытке сгруппировать селекторы. Первая заключаются в том, что часто забывают писать селекторы в полном обьеме. Например, если вы хотите описать правила для двух селекторов находящихся в контейнере с одним id, то существует большая вероятность, что будет допущена ошибка:
-
#maincontent p, ul {
-
border-top:1px solid #ddd;
-
}
Таким описанием вы определите правила только параграфа p, находящимся в контейнере с id, а вот для для списков эти правила будут действовать всегда. Правильной группировка селекторов в данном случае будет такая:
-
#maincontent p, #maincontent ul {
-
padding-top:1em;
-
}
Вторая основная ошибка при группировке селекторов заключается в том, что часто ставят запятую после последнего селектора. Это может заставить некоторые браузеры полностью игнорировать такое правило. Например:
-
.highlight p, .highlight ul, {
-
margin-left:5em;
-
}
