CSS Avancerad syntax

Gruppering av väljare

Du kan gruppera väljare, så att grupperade väljare kan dela samma deklarationer. Separera de behövda väljarna med kommatecken. I följande exempel har vi grupperat alla rubrikelement. Alla rubrikelement är gröna.

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

Arv och dess problem

Enligt CSS arver underelement egenskaper från förälderelement. Men det fungerar inte alltid på detta sätt. Titta på följande regel:

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

Enligt denna regel kommer webbplatsens body-element att använda Verdana-teckensnitt (om systemet hos besökaren har denna typsnitt).

Genom CSS-arv kommer underelement att arbeta vidare egenskaper från den högre elementen (i detta fall body) som de har (dessa underelement inkluderar p, td, ul, ol, ul, li, dl, dt och dd). Det behövs inga ytterligare regler, alla body-underelement bör visa Verdana-teckensnitt, och underunderelementen också. Och det är verkligen så i de flesta moderna webbläsare.

Men under den blodiga åldern av webbläsarkriget hände detta inte alltid, eftersom stöd för standarder inte alltid var företagens främsta prioritet. Till exempel stödde Netscape 4 inte arv, den ignorerade inte bara arv utan också regler som tillämpades på body-elementet. IE/Windows hade fortfarande relaterade problem ända till IE6, där typsnittsstilar inom tabeller skulle ignoreras. Vad ska vi då göra?

Vänlig mot Netscape 4

Lyckligtvis kan du hantera problemet med att gamla webbläsare inte förstår arv genom att använda regeln som vi kallar "Vänlig mot Netscape 4".

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

4.0-webbläsare kan inte förstå arv, men de kan förstå gruppselektorer. Detta kommer att slösa bort något av användarnas bandbredd, men om du måste stödja Netscape 4-användare, måste du göra detta.

Är arv en förbannelse?

Om du inte vill att "Verdana, sans-serif"-tecknet ska varaverkat av alla underelement, vad ska du göra? Till exempel, om du vill att paragrafens tecken ska vara Times. Inget problem. Skapa en specifik regel för p så kommer den att bryta bort föräldregemenskapen:

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;
     }