Unverzichtbare CSS-Leitfäden

Der folgende Editor stellt Ihnen einen unverzichtbaren CSS-Leitfaden zur Verfügung. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Kommen Sie und werfen Sie einen Blick mit dem Editor

Kapitel 1 CSS und Dokumente

1, Element: Ersatzelement (IMG-Eingabe), nicht Ersetzen Elemente (die meisten Bereiche).

2, Link: rel (repräsentative Beziehung: Stylesheet, Kandidaten-Stylesheet: alternatives Stylesheet); Typ (Text/CSS); Titel (koordinierender Kandidat). ).

3, @import url(sheet1.css) muss innerhalb von style verwendet werden, platziert vor anderen CSS-Regeln

4, Rückwärtszugänglichkeit: c9ccee2e6ea535a969eb3f532ad9fe89 - Style-->531ac245ce3e4fe3d50054a55f265927, sodass ältere Browser den Style ignorieren und das Stylesheet normal lesen können

5, CSS-Kommentare: /* */ 🎜>

Kapitel 2 Selektoren

1. Achten Sie beim Gruppieren von Aussagen darauf, Punkte am Ende jeder Aussage zu verwenden.

2, p.warming.help {background:red;} stimmt nur mit p-Elementen überein, deren Klasse warming und help enthält. Wenn p warming und andere enthält, kann der Browser die Eindeutigkeit nicht überprüfen id im HTML, aber das wird es schwieriger machen, den Dom

4, Attributselektor: h1[class] {...}

h1[class=''] zu schreiben. {...} Genaue Übereinstimmung

h1[class~=''] {...} Teilweise Übereinstimmung [class^=''] Was bedeutet [class$ beginnt mit =''] und endet mit was [ class*=''] enthält alle Elemente

*[lang|='en']Ein spezifischer Attributselektor, der das lang-Attribut gleich „en“ oder beginnend mit „en“ auswählt.

5, wählen Sie das untergeordnete Element aus: h1>strong; wählen Sie das benachbarte Geschwisterelement h1+p aus (h1 und p haben ein gemeinsames übergeordnetes Element und wählen Sie schließlich p) aus. Link-Pseudoklasse: nicht besuchter Link: Link, besuchter Link: besucht (beide sind statisch), äquivalent zu 8f1663f1a1021d031485f1b9a8aaa766 Klasse kann für jedes Element verwendet werden)

Empfohlene Pseudoklassenreihenfolge: link-visited-focus-hover-active Das erste untergeordnete Element (:first-child), das leicht missverstanden werden kann, ist alles erste untergeordnete Elemente (im folgenden Beispiel umfassen die Elemente als erste untergeordnete Elemente das erste p, das erste li sowie strong und em).

Wählen Sie entsprechend der Sprache (:lang()) aus, z. B. *:lang(fr){color:red;} Dadurch werden alle französischen Elemente in Rot angezeigt.

Pseudoelementselektor: erster Buchstabe: erster Buchstabe, Benutzeragent bildet dynamisch das Pseudoelement a4854fa5e009d189ff36129bc66b9c53;

Erste Zeile: erste Zeile; 🎜>Vorher und Nachher: ​​vorher :nachher.

<p>
    <p>helooo</p>
    <ul>
        <li>111</li>
        <li><strong>222</strong></li>
    </ul>
    <p>
        <em>333</em>
    </p>
</p>

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