Heim > Artikel > Web-Frontend > Ausführliche Erläuterung einiger gängiger CSS-Selektorbeispiele

Ausführliche Erläuterung einiger gängiger CSS-Selektorbeispiele

伊谢尔伦Original: 2017-05-30 13:36:112141Durchsuche

So importieren Sie ein externes CSS-Stylesheet

Verwenden Sie den Link-Tag, um ein externes CSS-Stylesheet zu importieren

<link rel="stylesheet" href="css/demo01.css">

Importieren (importieren) Sie den externen Stil Blatt im Stylesheet

@import url("/crazy-html5/06css/css/demo01.css");

Internes Stylesheet verwenden

Das interne Stylesheet kann nur auf eine bestimmte Webseite angewendet werden. Die Definitionsmethode ist das Hinzufügen das Style-Tag in der Kopfzeile und im Style-Tag. Sie können Seitenstile in hinzufügen.

<head>
    <style>
        table {
            background: #003366;
        }
    </style>
</head>

Selektor-Wissenspunkte

Elementattribut-Selektor

1) Gewöhnlicher Tag-Selektor

Tabelle:{background:red;}

2) Ein Tag, der ein bestimmtes Attribut

p[id]{background:red;} enthält, stellt ein p-Element dar, das ein id-Attribut enthält

3) Ein Tag, das ein Attribut enthält und dessen Attributwert ein bestimmter Wert ist

p[id=aaa]{background:red;} stellt ein p-Element dar, das ein id-Attribut und id=aaa enthält

4) Ein Element, das ein Attribut enthält und dessen Attributwert mit einem bestimmten Wert beginnt

p[id=^aaa]{background:red;} bedeutet, dass es das id-Attribut und den Wert von enthält Die ID beginnt mit aaa. Das p-Element am Anfang

5) Das Element, das ein Attribut enthält und dessen Attributwert mit einem bestimmten Wert endet

p[id=$c]{background: rot;} bedeutet, dass es das id-Attribut enthält, und der Wert von id ist ein p-Element, das mit c endet

ID-Selektor

id-Selektor, der das Element angibt, dessen ID ist ein bestimmter Wert, zum Beispiel stellt #myp die ID dar. Für Elemente mit myp-Wert muss das Symbol #

Klassenselektor

vor der ID hinzugefügt werden Selektor. Der Klassenselektor ist ein Element, das dem Klassenwert entspricht und vor dem Selektor hinzugefügt werden muss. Das Symbol ., zum Beispiel .myclass, repräsentiert alle Elemente, deren Klassenwert myclass ist.

Klassenselektoren können in Kombination mit Elementselektoren verwendet werden. Beispielsweise muss p.important{color:red;} die Bedingungen beider Selektoren erfüllen, um wirksam zu werden.

Enthält Selektoren und Nachkommenselektoren

Nachkommenselektoren können Elemente auswählen, die Nachkommen eines Elements sind, zum Beispiel: h1 em{color:red}, diese Regel wird umgedreht Der Text des em-Elements, das ein Nachkomme des h1-Elements in red ist, ist von dieser Regel nicht betroffen.

Untergeordneter Selektor

ähnelt dem Nachkommenselektor, wirkt sich jedoch nur auf bestimmte direkte Nachkommen des Elements aus. Beispielsweise wirkt h1>strong{color:red;} auf das starke Element der ersten Ebene im h1-Element und andere Ebenen sind nicht betroffen

Angrenzender Geschwisterselektor

Wenn Sie ein Element unmittelbar nach einem anderen Element auswählen müssen und beide das gleiche übergeordnete Element haben, können Sie den benachbarten Geschwisterselektor verwenden, z. B. h1+p{margin-top:50px;}, um das Element unmittelbar nach h1 auszuwählen Im angezeigten Absatz haben die Elemente h1 und p dasselbe übergeordnete Element

Selektorgruppierung

Selektoren, die gleichzeitig auf mehrere Elemente wirken, wie z. B. h2, p{color :gray;} wirkt sich sowohl auf das h2-Element als auch auf das p-Element aus.

* ist ein Platzhalterselektor, der mit jedem Element übereinstimmen kann

Pseudoelementselektor

1): first-line{color:red }Set ein spezieller Stil für die erste Textzeile

2):first-letter{color:red;}Legen Sie einen speziellen Stil für den ersten Buchstaben des Textes fest

:after, :before ohne Selektor

:before{} kann verwendet werden, um Inhalte vor dem Elementinhalt einzufügen. Der Inhalt kann durch Inhalt angegeben werden.

:after{} kann verwendet werden, um Inhalte nach dem Element einzufügen Der Inhalt kann durch den Inhalt angegeben werden, z. B.

p:before{
    content:url("img.png");
}

danach und vor kann mit Anführungszeichen verwendet werden, und Anführungszeichen können mit Zählern verwendet werden, um den Anführungszeichentyp verschachtelter Referenzen festzulegen

<style>
    p>p {
        quotes: "《" "》"
    }
    p>p::before{
      content: open-quote;
    }
    p>p::after{
      content:close-quote;
    }
</style>

nachher und davor

Sie können einen Zähler verwenden, um mehrstufige Zahlen vor dem Text hinzuzufügen. Dies kann ein spezieller Artikel sein, und Ich werde hier nicht auf Details eingehen.

Pseudoklassenselektor

1 :Root-Selektor entspricht dem Dokumentstammelement

2 :first-child gibt an, wann das Element sein übergeordnetes Element ist Stil des ersten untergeordneten Elements

3 :last-child gibt den Stil des letzten untergeordneten Elements an, wenn das Element sein übergeordnetes Element ist.

4 :nth-child(n) gibt den Stil an, wenn das Element es ist Der Stil des n-ten untergeordneten Elements seines übergeordneten Elements

Wenn n ungerade ist, stimmt es überein, wenn das Element ein ungerades untergeordnetes Element seines übergeordneten Elements ist.

Wenn n gerade ist, stimmt es überein, wenn das Element ist eine gerade Zahl des übergeordneten untergeordneten Stils

Wenn n m*n+p ist, passen Sie das Element an, dessen übergeordnetes Element mit dem m*n+p-ten untergeordneten Stil übereinstimmt

5 :nth- last-child (n) Gibt den Stil an, der wirksam wird, wenn das Element das n-te untergeordnete Element seines übergeordneten Elements ist.

6 :only-child gibt den Stil an, der wirksam wird, wenn das Element das einzige untergeordnete Element ist seines übergeordneten Elements

7 :leer Geben Sie den Stil leerer Elemente an

Pseudoklassenselektor für den Elementstatus

1 :bewegen Sie den Stil, wenn die Maus bewegt wird Zeiger befindet sich auf dem Element

2 :focus Der Stil des fokussierten Elements

3 :enabled Der Stil des aktivierten Elements

4 :disabled Der Stil des deaktivierten Elements

5 :checked Der Stil des ausgewählten Elements (Kontrollkästchen, Radio)

6 ::selection Der Stil einiger vom Benutzer ausgewählter Elemente

7 :not(selector ) Wählen Sie den Stil aus, der nicht dieser Selektor ist

8 :Zielauswahl Das aktuell aktive #news-Element, das im Allgemeinen mit Ankern verwendet wird

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung einiger gängiger CSS-Selektorbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der Lösung von CSS-Browser-KompatibilitätsproblemenNächster Artikel：Zusammenfassung der Lösung von CSS-Browser-Kompatibilitätsproblemen

In Verbindung stehende Artikel

Mehr sehen