Когато групирате CSS селектори, прилагате едни и същи стилове към няколко различни елемента, без да повтаряте стиловете във вашата таблица със стилове. Вместо да имате две, три или повече CSS правила, които правят едно и също нещо (например задайте цвета на нещо на червен), вие използвате едно правило на CSS, което изпълнява едно и също нещо. Тайната на тази тактика за повишаване на ефективността е запетая.
Как да групираме CSS селектори
За да групирате CSS селектори в таблица със стилове, използвайте запетаи за разделяне на множество групирани селектори в стила. В този пример стилът засяга елементите p и div:
div, p {цвят: # f00; }
В този контекст запетая означава "и", така че този селектор се отнася за всички елементи на абзаца и всички елементи на разделяне. Ако запетая липсваше, селекторът вместо това щеше да се приложи към всички елементи на абзаца, които са дъщерни на разделение. Това е различен вид селектор, така че запетайката е важна.
Можете да групирате произволна форма на селектор с всеки друг селектор. Този пример групира селектор на клас с ID селектор:
p.red, #sub {цвят: # f00; }
Този стил се прилага за всеки абзац с атрибут class на червен и всеки елемент (тъй като видът не е посочен) с атрибут ID на под.
Можете да групирате произволен брой селектори, включително селектори, които са единични думи и съставни селектори. Този пример включва четири различни селектора:
p, .червен, #sub, div a: link {color: # f00; }
Това CSS правило ще се прилага за:
- Всеки елемент на абзаца
- Всеки елемент с класа на червен
- Всеки елемент с идентификатор на под
- The връзка псевдо клас на опорните елементи, които са потомци на деление.
Последният селектор е съставен селектор. Както е показано, той лесно се комбинира с другите селектори в това правило на CSS. Правилото задава цвета на # f00 (червено) на тези четири селектора, което е за предпочитане да се напишат четири отделни селектора, за да се постигне един и същ резултат.
Всеки селектор може да бъде групиран
Можете да поставите всеки валиден селектор в група и всички елементи в документа, които съответстват на всички групирани елементи, ще имат един и същ стил въз основа на това свойство на стила.
Някои дизайнери предпочитат да изброят групирани елементи на отделни редове за четливост в кода. Появата на уебсайта и скоростта на зареждане остават същите. Например можете да комбинирате стилове, разделени със запетаи, в едно свойство на стила в един ред код:
th, td, p.red, div # firstred {цвят: червен; }
или можете да изброите стиловете на отделни редове за по-голяма яснота:
ти,
td,
p.червен,
div # firstred
{
цвят: червен;
}
Защо да групираме CSS селектори?
Групирането на CSS селектори помага да се сведе до минимум размерът на вашата таблица със стилове, така че да се зарежда по-бързо. Разбира се, таблиците със стилове не са основните виновници за бавното зареждане; CSS файловете са текстови файлове, така че дори много дългите CSS листове са малки в сравнение с неоптимизирани изображения. И все пак всяка част от оптимизацията помага и ако успеете да избръснете някакъв размер от CSS и да заредите страниците много по-бързо, това е хубаво нещо.
Групирането на селектори също улеснява поддръжката на сайта. Ако трябва да направите промяна, можете просто да редактирате едно CSS правило вместо множество такива. Този подход спестява време и главоболия.
Изводът: Групирането на CSS селектори повишава ефективността, производителността, организацията и в някои случаи дори скоростта на зареждане.