Группировка селекторов
Оригинал: Grouping selectors
Селекторы используются для выбора 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;
}
Добавить комментарий
