Grupowanie selektorów

Poprzednia strona Wybieranie elementów
Następna strona Szczegółowe wyjaśnienie selektorów klas

Grupowanie selektorów

Załóżmy, że chcesz, aby elementy h2 i akapity miały kolor szary. Najłatwiejszym sposobem, aby osiągnąć to, jest użycie następującego deklarowania:

h2, p {color:gray;}

Umieść selektory h2 i p po lewej stronie reguły, a następnie rozdziel je przecinkiem, aby zdefiniować regułę. Styl z prawej strony (color:gray;) zostanie zastosowany do elementów odniesionych przez te selektory. Przecinek informuje przeglądarkę, że reguła zawiera dwa różne selektory. Bez tego przecinka, znaczenie reguły byłoby zupełnie inne. Zobacz również pochodne selektory.

Można zgrupować dowolną liczbę selektorów razem, nie ma ograniczeń.

Na przykład, jeśli chcesz wyświetlić wiele elementów w kolorze szarym, możesz użyć reguły podobnej do tej:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

Wskazówka:Przez grupowanie, twórcy mogą 'kompresować' pewne typy stylów razem, co pozwala na uzyskanie bardziej zwięzłych tabel stylów.

Poniższe dwie pary reguł dają ten sam wynik, ale można wyraźnie zobaczyć, które są łatwiejsze do napisania:

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

Spróbuj sam

Grupy oferują kilka interesujących opcji. Na przykład, wszystkie grupy reguł w poniższym przykładzie są równoważne, każda grupa tylko pokazuje różne metody prezentacji grupowania selektorów i deklaracji:

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

spróbuj sam:

Proszę zauważyć, że w grupie 3 użyto 'grupowanie deklaracji'. Omówimy to 'grupowanie deklaracji' później.

Selektor wszechogólny

CSS2 wprowadził nowy prosty selektor - selektor wszechogólny (universal selector), który jest reprezentowany przez gwiazdkę (*). Ten selektor może pasować do każdego elementu, jak znak wieloznaczny.

Na przykład, poniższa reguła sprawi, że każdy element dokumentu będzie czerwony:

* {color:red;}

Spróbuj sam

Ta deklaracja jest ekwiwalentna dla listy wszystkich elementów dokumentu z grupowaniem selektorów. Dzięki selektorowi wszechogólnemu, wystarczy jedno naciśnięcie klawisza (tylko jeden gwiazdka), aby określić wartość atrybutu 'color' dla wszystkich elementów dokumentu na czerwony.

Grupowanie deklaracji

Możemy grupować zarówno selektory, jak i deklaracje.

Załóżmy, że chcesz, aby wszystkie elementy h1 miały czerwone tło i były wyświetlane w kolorze niebieskim, używając czcionki Verdana o wysokości 28 pikseli, możesz napisać następujący styl:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Jednak to podejście nie jest bardzo efektywne. Zwłaszcza gdy tworzymy listę takich stylów dla elementu z wieloma stylami, jest to bardzo uciążliwe. Zamiast tego, możemy zgrupować deklaracje razem:

h1 {font: 28px Verdana; color: white; background: black;}

To ma dokładnie takie samo działanie jak poprzednie 3 wiersze arkusza stylów.

Uwaga, grupowanie deklaracji, konieczne jest użycie średnika na końcu każdej deklaracji, co jest bardzo ważne. Przeglądarka ignoruje białe znaki w arkuszu stylów. Jak tylko dodamy średnik, możemy swobodnie używać następującego formatu do tworzenia stylów:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Spróbuj sam

Jak widać, ta forma jest bardziej czytelna.

Jednak, jeśli pominiemy drugi średnik, użytkownik agent interpretuje ten arkusz stylów tak:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Spróbuj sam

Ponieważ 'background' nie jest poprawną wartością dla 'color', a ponieważ można指定单个关键字给 'color', użytkownik代理 całkowicie zignoruje to oświadczenie koloru (w tym 'background: black'). W ten sposób tytuł h1 będzie wyświetlany tylko w kolorze niebieskim, bez tła czerwonego, chociaż jest bardziej prawdopodobne, że w ogóle nie uzyskamy niebieskiego h1. Zamiast tego, te tytuły będą wyświetlane tylko w domyślnym kolorze (zwykle czarnym) i bez żadnego koloru tła. Oświadczenie 'font: 28px Verdana' działa normalnie, ponieważ rzeczywiście kończy się średnikiem.

Jak i grupowanie selektorów, grupowanie deklaracji jest wygodnym sposobem, który może skrócić arkusz stylów, uczynić go bardziej przejrzystym i łatwiejszym do utrzymania.

Wskazówka:Dobrym nawykiem jest dodanie kropki-kropki w ostatnim deklaracji w regule. Kiedy dodajemy kolejną deklarację, nie musimy martwić się o dodanie kolejnej kropki-kropki.