Erweiterte CSS-Syntax

[Einführung] Gruppierung von Selektoren Sie können Selektoren gruppieren, sodass gruppierte Selektoren dieselbe Anweisung teilen können. Verwenden Sie Kommas, um Selektoren zu trennen, die gruppiert werden müssen. Im folgenden Beispiel haben wir alle Überschriftenelemente gruppiert. Alle Titelelemente sind grün. h1,h2,h3,h4,h5

Gruppe von Selektoren

Sie können Selektoren gruppieren, sodass die gruppierten Selektoren dieselbe Anweisung gemeinsam nutzen können. Verwenden Sie Kommas, um Selektoren zu trennen, die gruppiert werden müssen. Im folgenden Beispiel haben wir alle Überschriftenelemente gruppiert. Alle Titelelemente sind grün.

h1,h2,h3,h4,h5,h6 {
Farbe: grün;
}

Vererbung und ihre Probleme

Laut CSS erben untergeordnete Elemente Eigenschaften von ihren übergeordneten Elementen. Aber es funktioniert nicht immer so. Schauen Sie sich die folgende Regel an:

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

Gemäß der obigen Regel ist das body-Element des Die Website verwendet die Schriftart Verdana (sofern die Schriftart auf dem System des Besuchers vorhanden ist).

Durch die CSS-Vererbung erben untergeordnete Elemente die Attribute, die dem Element der höchsten Ebene (in diesem Fall body) gehören (diese untergeordneten Elemente wie p, td, ul, ol, ul, li, dl, dt und dd). Es sind keine zusätzlichen Regeln erforderlich. Alle untergeordneten Elemente des Körpers sollten die Schriftart Verdana anzeigen, ebenso wie die untergeordneten Elemente des untergeordneten Elements. Und in den meisten modernen Browsern ist dies tatsächlich der Fall.

Aber in den blutigen Tagen der Browserkriege wäre dies möglicherweise nicht passiert, als die Unterstützung von Standards für Unternehmen keine Priorität hatte. Netscape 4 unterstützt beispielsweise keine Vererbung und ignoriert nicht nur die Vererbung, sondern auch Regeln, die für das Body-Element gelten. Es gibt immer noch ein verwandtes Problem in IE/Windows bis IE6, bei dem Schriftarten in Tabellen ignoriert werden. Was sollen wir tun?

Be Kind to Netscape 4

Glücklicherweise können Sie dies erreichen, indem Sie eine Redundanz verwenden, die wir „Be Kind to Netscape 4“-Regeln nennen Beheben Sie das Problem, dass ältere Browser die Vererbung nicht verstehen können.

Körper {
Schriftfamilie: Verdana, serifenlos;
}

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

4.0 Browser verstehen die Vererbung nicht, aber sie verstehen Gruppenselektoren. Obwohl dadurch die Bandbreite einiger Benutzer verschwendet wird, ist dies erforderlich, wenn Sie Netscape 4-Benutzer unterstützen müssen.

Ist Erbschaft ein Fluch?

Was ist, wenn Sie nicht möchten, dass die Schriftart „Verdana, serifenlos“ von allen untergeordneten Elementen geerbt wird? Nehmen wir an, Sie möchten, dass die Schriftart Ihres Absatzes „Times“ ist. Kein Problem. Erstellen Sie eine spezielle Regel für p, damit die Regeln des übergeordneten Elements entfernt werden:

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

td , ul, ol, ul, li, dl, dt, dd {
Schriftfamilie: Verdana, serifenlos;
}

p {
Schriftfamilie: Times, " Times New Roman", Serife;
}

Das obige ist der detaillierte Inhalt vonErweiterte CSS-Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!