Pseudoklassen und Pseudoelemente in CSS: danach

Dieser Artikel stellt hauptsächlich die :after-Pseudoklasse und das Pseudoelement in CSS vor. Jetzt kann ich es mit Ihnen teilen

Es gibt einige spezielle Attribute in CSS, sogenannte Pseudoklassen. Die am häufigsten verwendeten sind Pseudolinks: Link, :visited, :hover, :active usw. In diesem Artikel wird die Verwendung von after im Detail vorgestellt. Interessierte Freunde können davon erfahren, es könnte für Sie hilfreich sein

Es gibt einige spezielle Attribute in CSS, die als Pseudoklassen bezeichnet werden. Das am häufigsten verwendete unter ihnen ist die Definition von Pseudo-Links :link, :besucht, :hover, :aktiv usw.
Darüber hinaus gibt es auch einige Pseudoklassen, die nicht häufig verwendet werden, darunter :focus, :first-child, :lang usw.

Und es gibt nicht nur Pseudoklassen in CSS, sondern auch Pseudoelemente, wie zum Beispiel: first-letter, :first-line, :before und :after.
Die anderen Pseudoelemente in diesem Artikel werden vorerst nicht aufgeführt. Reden wir einfach über: nach dem Pseudoelement.
Nachher bedeutet, wie der Name schon sagt, nach dem Element. Die Essenz besteht darin, Inhalt nach dem Element hinzuzufügen.
Mit diesem Pseudoelement können Produzenten generierte Inhalte am Ende des Elementinhalts einfügen. Es muss mit dem Inhaltsattribut verwendet werden, um den Inhalt festzulegen, der nach dem Objekt auftritt. Standardmäßig ist dieses Pseudoelement inline, dies kann jedoch mithilfe des Anzeigeattributs geändert werden.
Alle gängigen Browser unterstützen das Pseudoelement :after, aber für IE wird es nur von IE8 und höher unterstützt.

Fügen Sie beispielsweise in den CSS-Code ein:

Der Code lautet wie folgt:

<style type="text/css"> 
h1:after {content:url(logo.gif)} 
</style> <h1>标题内容</h1>

<style type="text/css"> 
.test:after{content:"测试代码"}; 
</style> 
<p class="test">测试p：</p>
运行结果显示为：
测试p：测试代码

Bei der Anzeige wird nach dem Titelinhalt ein Bild eingefügt. Dies ist, was das Pseudoelement :after tut. :Auf den Inhalt der After-Pseudoklasse können auch andere Parameter folgen, 1: String

Zum Beispiel:

<style type="text/css"> 
.test:after{content:attr(id)}; 
</style> 
<p class="test" id="aaa">测试p的id为：</p>运行结果显示为：测试p的id为：aaa

Der Code lautet wie folgt:

rrreee

2: attr(x)
, attr bedeutet Attribut, wie der Name schlägt vor, diesen Knotentyp zu lesen. Zum Beispiel:

Der Code lautet wie folgt:
rrreee

Drei: Feste Parameter

close-quote: Einfügen Das Post-Mark des Quotes-Attributs no-close-quote: fügt das Tag nicht nach dem Quotes-Attribut ein. Erhöhen Sie jedoch die Verschachtelungsebene. open-quote: Fügen Sie das Tag vor dem quotes-Attribut ein.

no-open-quote: Fügen Sie das Tag nicht vor dem quotes-Attribut ein. Aber reduzieren Sie die Verschachtelungsebene

Verwandte Empfehlungen:

Vererbbare Eigenschaften in CSS

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