Zaawansowana gramatyka CSS

Grupowanie selektorów

Możesz grupować selektory, aby grupowane selektory mogły dzielić się tymi samymi deklaracjami. Rozdziel grupowane selektory przecinkami. W poniższym przykładzie zgrupowaliśmy wszystkie elementy tytułowe. Wszystkie elementy tytułowe są zielone.

h1,h2,h3,h4,h5,h6 {
  color: green;
  {}

Dziedziczenie i jego problemy

Zgodnie z CSS, elementy potomne dziedziczą atrybuty od elementu nadrzędnego. Ale nie zawsze działa to w ten sposób. Spójrz na poniższą zasadę:

body {
     font-family: Verdana, sans-serif;
     {}

Zgodnie z powyższą zasadą, element body strony będzie używał czcionki Verdana (jeśli system użytkownika ma tę czcionkę).

Dzięki dziedziczeniu CSS, elementy potomne będą dziedziczyć atrybuty najwyższego elementu (w tym przypadku body). Nie wymaga dodatkowych reguł, wszystkie potomne elementy body powinny wyświetlać czcionkę Verdana, a także potomne elementy potomne. I w większości współczesnych przeglądarek rzeczywiście jest to takie.

Ale w czasach krwawych bitew przeglądarek, takie sytuacje niekoniecznie miałyby miejsce, ponieważ wsparcie dla standardów nie było priorytetem dla firm. Na przykład, Netscape 4 nie obsługuje dziedziczenia, zarówno ignoruje dziedziczenie, jak i reguły stosowane do elementu body. Problem ten istniał również w IE/Windows do wersji IE6, gdzie styl czcionki w tabeli był ignorowany. Jak sobie z tym poradzimy?

Być przyjaznym dla Netscape 4

Na szczęście, możesz rozwiązać problem z niekompatybilnością starszych przeglądarek, które nie rozumieją dziedziczenia, korzystając z zasady nadmiarowości, którą nazywamy "Be Kind to Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     {}
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     {}

4.0 przeglądarki nie rozumie dziedziczenia, ale rozumie grupowanie selektorów. Chociaż to może marnować trochę przepustowości użytkowników, jeśli trzeba wspierać użytkowników Netscape 4, musi się to zrobić.

Czy dziedziczenie to klątwa?

Jeśli nie chcesz, aby czcionka "Verdana, sans-serif" była dziedziczona przez wszystkie potomki, co robić? Na przykład, jeśli chcesz, aby czcionka akapitu była Times. Nie ma problemu. Stwórz specjalne reguły dla p, aby uniknąć reguł rodzica:

body  {
     font-family: Verdana, sans-serif;
     {}
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     {}
p  {
     font-family: Times, "Times New Roman", serif;
     {}