CSS-Prioritäts- und Vererbungsprobleme

CSS-Prioritäts- und Vererbungsprobleme

★CSS-Konflikte, also Prioritäten
Die Einstellungen von CSS selbst können mehrere Stile gleichzeitig auf dasselbe Element anwenden, und es kann zu Konflikten zwischen Stilen kommen Diesmal Und kann nicht den gewünschten Effekt erzielen.
★Prioritätsregeln für die Lösung von CSS-Konflikten:
● Priorität der CSS-Cascading-Stylesheet-Einführungsmethoden: Inline > Eingebettet > Der später angezeigte Stil ist höher als der zuerst angezeigte Stil, was allgemein als Override bezeichnet wird 100, die Gewichtung der Klasse beträgt 10 und die Gewichtung des Tag-Namens beträgt 1)
● Fügen Sie nach dem Stil ein !important hinzu, zum Beispiel: .abc {background:#fff !improtant;} Die Priorität dieses Stils Die Ebene wird standardmäßig auf die oberste Ebene angehoben und globale Stile können sie nicht beeinflussen.
✪Hinweis: !important sollte vor dem Semikolon stehen
Priorität:
Proximitätsprinzip (je näher am Code, desto höher die Priorität)
Je kleiner der Auswahlbereich, desto höher die Priorität. Verfeinern Sie das CSS, wickeln Sie es Schicht für Schicht ein, indem Sie weitere Selektoren des übergeordneten Elements hinzufügen, und schränken Sie den Auswahlbereich ein

★Stilvererbung:

Vererbung bedeutet, dass wir den CSS-Stil des übergeordneten (übergeordneten) Elements festlegen. , und die übergeordnete (übergeordnete) Ebene) und die untergeordneten (untergeordneten) Ebenen haben dieses Attribut. Im Allgemeinen verfügt nur Text über geerbte Eigenschaften wie Textgröße, Textfettigkeit, Textfarbe, Schriftart usw. Beachten Sie jedoch, dass einige CSS-Stile nicht vererbt werden. Zum Beispiel: Rand: 1 Pixel durchgehend rot; : p) Die Textfarbe von ist rot und die Textfarbe des untergeordneten Elements (Span) ist nicht festgelegt, aber der Text verfügt über Vererbungseigenschaften, sodass der Textinhalt des untergeordneten Elements immer noch rot ist.

(2) Wenn nach dem Festlegen des übergeordneten Textfarbstils die Farbe einiger untergeordneter Elemente aufgrund der Vererbung mit der des übergeordneten Elements übereinstimmt, ist dies nur erforderlich um die gewünschte Farbe für das entsprechende Kind einzustellen.
✪Hinweis: Es gibt noch ein weiteres besonderes Gewicht – die Vererbung hat auch ein Gewicht, aber es ist sehr niedrig. In einigen Literaturstellen wird empfohlen, dass es nur 0,1 beträgt, sodass davon ausgegangen werden kann, dass die Vererbung das niedrigste Gewicht hat.

Vorteile der Vererbung: Sie können nur die CSS-Stylesheet-Attribute der oberen Ebene festlegen, und die untergeordneten (untergeordneten) Attribute müssen nicht festgelegt werden. Sie alle verfügen über dieses CSS-Attribut, das den CSS-Code reduzieren und vereinfachen kann Wartung.

★Attribute, die in CSS vererbt werden können

1. Eigenschaften ohne Vererbung

<p style="color:red;">如果你不知道自己<span>想做什么该做什么</span>，那你什么都做不好。</p>

1. Gibt den Typ der Box an, die das Element generieren soll

2. Textattribute:

vertikal-align: Vertikale Textausrichtung

text-decoration: Gibt die dem Text hinzugefügte Dekoration an

text-shadow: Textschatteneffekt

white-space: Verarbeitung von Leerzeichen

unicode-bidi: Festlegen der Textrichtung

3. Box-Modellattribute: Breite, Höhe, Rand, Rand oben, Rand - rechts, Rand unten, Rand links, Rand, Randstil, Rand oben, Rand rechts, Rand unten, Rand links, Randbreite, Rand oben , Rand-rechts-rechts, Rand-unten-Breite, Rand-links-Breite, Rand-Farbe, Rand-Obere-Farbe, Rand-Rechts-Farbe, Rand-Untere-Farbe, Rand-Links-Farbe, Rand-Oben , Rand rechts, Rand unten, Rand links, Polsterung, Polsterung oben, Polsterung rechts, Polsterung unten, Polsterung links

Hintergrundattribute: Hintergrund, Hintergrundfarbe, Hintergrundbild , Hintergrundwiederholung, Hintergrundposition, Hintergrundanhang

5. Positionierungsattribute: schwebend, klar, Position, oben, rechts, unten, links, minimale Breite, minimale Höhe, maximale Breite, max - Höhe, Überlauf, Clip, Z-Index

6. Generierte Inhaltsattribute: Inhalt, Zähler-Reset, Zähler-Inkrement

7 , Umrissfarbe, Umriss

8. Seitenstilattribute: Größe, Seitenumbruch-vorher, Seitenumbruch-nachher

9 , Pause, Cue-vor, Cue-nach, Cue-während

2. Geerbte Attribute

Schriftart: kombinierte Schriftart

Schriftfamilie: Geben Sie die Schriftfamilie des Elements an

Schriftstärke: Legen Sie die Dicke der Schriftart fest

Schriftgröße: Legen Sie die Schriftgröße fest

Schriftstil: Definieren Sie den Stil der Schriftart

Schriftvariante: Legen Sie die Schriftart für Kapitälchen fest, um Text anzuzeigen. Dies bedeutet, dass alle Kleinbuchstaben in Großbuchstaben umgewandelt werden, alle Buchstaben jedoch in Kleinbuchstaben Die Schriftart von Großbuchstaben unterscheidet sich vom Rest des Textes. Die Schriftgröße ist im Vergleich zu kleiner.

font-stretch: Dehnen und transformieren Sie die aktuelle Schriftfamilie. Wird nicht von allen gängigen Browsern unterstützt.

font-size-adjust: Geben Sie einen Aspektwert für ein Element an, damit die x-Höhe der bevorzugten Schriftart beibehalten wird.

2. Textreihenattribute

text-indent: Texteinrückung

text-align: horizontale Textausrichtung

line-height: Zeilenhöhe

Wortabstand: Vergrößern oder Verkleinern des Abstands zwischen Wörtern (d. h. Wortabstand)

Buchstabenabstand: Vergrößern oder Verkleinern des Abstands zwischen Zeichen (Zeichenabstand)

Texttransformation : Groß-/Kleinschreibung des Textes steuern

Richtung: Geben Sie die Schreibrichtung des Textes an

Farbe: Textfarbe

3. Elementsichtbarkeit: Sichtbarkeit

4. Tabellenlayoutattribute: Beschriftungsseite, Randreduzierung, Randabstand, leere Zellen, Tabellenlayout

5 Attribute: Listenstil-Typ, Listenstil-Bild, Listenstil-Position, Listenstil

Generierte Inhaltsattribute: Anführungszeichen

7. Cursor-Attribut: Cursor

8. Seitenstilattribute: Seite, Seitenumbruch, Fenster, Waisen

9. Klangstilattribute: Sprechen, Sprechzeichen, Sprechzahl, Sprechgeschwindigkeit , Lautstärke, Stimmfamilie, Tonhöhe, Tonhöhenbereich, Spannung, Azimut, Elevation

3 Attribute, die von allen Elementen vererbt werden können

1 🎜>

2. Cursor-Attribute: Cursor

4. Attribute, die von Inline-Elementen geerbt werden können

2. Außer Texteinzug , Andere Textserienattribute als text-align

5. Attribute, die Elemente auf Blockebene erben können

1 text-indent, text-align

Mehr CSS wird bevorzugt Für verwandte Artikel zu Ebenen- und Vererbungsproblemen beachten Sie bitte die chinesische PHP-Website!