CSS Fortgeschrittene Grammatik

Gruppierung von Auswahlen

Sie können Auswahler verknüpfen, so dass die gruppierten Auswahler gemeinsame Deklarationen teilen können. Verwenden Sie Kommas, um die zu trennenden Auswahler zu trennen. In diesem Beispiel haben wir alle Titellemente gruppiert. Alle Titellemente sind grün.

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

Erben und ihre Probleme

Nach CSS erben die Kindelemente Eigenschaften vom Elternelement. Es funktioniert jedoch nicht immer auf diese Weise. Sehen Sie sich das folgende Regeln an:

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

Gemäß dieser Regel wird das body-Element der Website die Schriftart Verdana verwenden (falls das System des Besuchers diese Schriftart enthält).

Durch das CSS-Erben übernehmen die Kindelemente die Eigenschaften des höchsten Elements (im Beispiel ist dies der body), das sie besitzen (dies sind die Kindelemente wie p, td, ul, ol, ul, li, dl, dt und dd). Es sind keine zusätzlichen Regeln erforderlich, alle Kindelemente des body sollten die Schriftart Verdana anzeigen, und das gilt auch für die Enkelkinder der Kindelemente. Und in den meisten modernen Browsern ist das tatsächlich der Fall.

In den blutigen Jahren des Browserkriegs geschah dies jedoch nicht unbedingt, da die Unterstützung von Standards zu dieser Zeit nicht die erste Wahl der Unternehmen war. Nehmen wir zum Beispiel Netscape 4, der das Erben nicht unterstützt, sondern es ignoriert, sowie die Regeln, die auf dem body-Element angewendet werden. Bis zu IE6 gab es bei IE/Windows ähnliche Probleme, bei denen die Schriftarten in Tabellen ignoriert wurden. Was sollen wir also tun?

Freundlich mit Netscape 4 umgehen

Glücklicherweise können Sie durch die Verwendung des Redundanzregels, den wir "Be Kind to Netscape 4" nennen, mit Problemen umgehen, die bei alten Browsern, die das Erben nicht verstehen, auftreten.

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

4.0-Browser verstehen die Vererbung nicht, aber sie verstehen Gruppenselektoren. Dies führt zwar zu einem gewissen Bandbreitenverbrauch für einige Benutzer, aber wenn Unterstützung für Netscape 4-Benutzer erforderlich ist, muss dies so geschehen.

Ist Vererbung eine Hexerei?

Wenn Sie nicht möchten, dass die Schriftart "Verdana, sans-serif" von allen Unterelementen geerbt wird, was dann? Zum Beispiel möchten Sie, dass der Abschnittstext Times ist. Kein Problem. Erstellen Sie eine spezielle Regel für p, damit sie sich von den Regeln des übergeordneten Elements löst:

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