So verwenden Sie Pseudoklassen und Pseudoelemente in CSS-CSS-Tutorial-php.cn

So verwenden Sie Pseudoklassen und Pseudoelemente in CSS

清浅

Freigeben： 2018-11-24 10:22:44

Original

2914 Leute haben es durchsucht

Die Pseudoklasse kann über Methoden wie Link und Hover Spezialeffekte zum Selektor hinzufügen. Das Pseudoelement verwendet: first-line, um den ersten Zeilenstil hinzuzufügen, und :first-letter Fügen Sie den Anfangsbuchstaben hinzu. Dies wird unten ausführlich beschrieben. Beide

Pseudoklasse

Es ist eine Möglichkeit zur Auswahl Bestimmte Teile eines HTML-Dokuments, die im Laufe der Zeit den dynamischen Zustand von Elementen beim Betreten oder Verlassen durch Benutzereingriffe darstellen, gehören im Prinzip nicht zum HTML-Dokumentbaum selbst und seinen Elementen oder Attributen. Tatsächlich werden CSS-Pseudoklassen verwendet Um einige Spezialeffekte von Selektoren hinzuzufügen, und Pseudo- Verschiedene Elemente, Pseudoklassen können überall in der Selektorkette erscheinen.

Beispiel

a: Link stellt einen nicht besuchten Link dar

<style>
a:link{
background-color: pink;
}

Nach dem Login kopieren

Image 1.jpg

a: „visit“ stellt den besuchten Link dar

a:visited{
background-color: pink;
}

Nach dem Login kopieren

Image 7.jpg

a: Bewegen Sie den Mauszeiger auf „Beim Verknüpfen“

a:hover{
background-color: pink;
}

Nach dem Login kopieren

Image 1.jpg

a:hover muss sich nach a:link und a:visited befinden, damit es wirksam wird!

a: aktiv: zeigt den ausgewählten Link an

a:hover{
background-color: pink;
}
		a:active{
background-color: pink;
}

Nach dem Login kopieren

Image 6.jpg

Beachten Sie, dass aktiv nach dem Schweben verwendet werden muss, um wirksam zu werden

Pseudoelement

Pseudoelement wird verwendet, um Spezialeffekte auf bestimmte Selektoren festzulegen und kann nur auf externer Ebene und auf Dokumentebene angewendet werden Kontexte anstelle von Inline-Stilen. Sie dürfen nur am Ende einer Selektorkette erscheinen und jeder Selektor kann nur ein Pseudoelement angeben. Um mehrere Pseudoelemente in einer einzelnen Elementstruktur zu verarbeiten, müssen Sie mehrere Stilselektoren oder Deklarationsanweisungen erstellen.

: Pseudoelement der ersten Zeile

wird verwendet, um einen speziellen Stil für die erste Textzeile festzulegen. Es kann nur für Elemente auf Blockebene verwendet werden.

Die folgenden Attribute Schriftart, Farbe, Hintergrund, Wortabstand, Buchstabenabstand usw.

p:first-line 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!
</p>

Nach dem Login kopieren

gelten für das erste Zeile

Image 8.jpg

: Pseudoelement für den ersten Buchstaben

wird verwendet, um spezielle Stile für den ersten Buchstaben des Textes festzulegen:

kann Schriftart, Farbe, Hintergrund, Rand, Abstand, Rand und andere Attribute ändern

p:first-letter 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!

Nach dem Login kopieren

Nur für Anfangsbuchstaben

Image 9.jpg

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für Sie nützlich sein. Das Lernen aller hilft.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Pseudoklassen und Pseudoelemente in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!