Der Unterschied zwischen CSS-Pseudoklassen und Pseudoelementen

Pseudoklassen und Pseudoelemente sind unabhängig von der Dokumentstruktur. Die Art und Weise, wie sie Elemente erhalten, basiert nicht auf grundlegenden Elementeigenschaften wie ID, Klasse und Attributen, sondern auf Elementen (Pseudoklassen) in einem speziellen Zustand. Oder spezieller Inhalt im Element (Pseudoelement). Die Unterschiede werden wie folgt zusammengefasst:

CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

tr>:visitedFügen Sie dem ersten untergeordneten Element des Elements einen Stil hinzu

Attribute

Description

:active

属性	描述
:active	向被激活的元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素的第一个子元素添加样式
:lang	向带有指定lang属性的元素添加样式

ist aktiviert. Stile zu Elementen hinzufügen

:focus

备注：在 CSS 定义中，同一个元素的 :hover 必须位于 :link、:visited 之后才能生效，:active 必须位于 :hover 之后才能生效。

Stile zu Elementen mit Tastatureingabefokus hinzufügen

:hover

Stile zu Elementen hinzufügen, wenn die Maus darüber fährt

:link

Stile zu nicht besuchten Links hinzufügen

Zum besuchten Link hinzufügen Stil

:first-child

:lang

Stile zu Elementen mit dem angegebenen lang-Attribut hinzufügen

属性	描述
:first-letter	向文本的第一个字母添加特殊样式
:first-line	向文本的首行添加特殊样式
:before	在元素之前添加内容
:after	在元素之后添加内容

CSS-Pseudoelemente (Pseudoelemente): <a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c</a> wird verwendet, um Spezialeffekte auf bestimmte Selektoren festzulegen. Es dient dazu, bestimmte Inhalte im Element festzulegen und zu bedienen.

Die Operationsebene ist tiefer als bei Pseudoklassen Dynamiken sind schlechter als Pseudoklassen

.

• Eigenschaft	Beschreibung
  :first-letter	Fügen Sie dem ersten Buchstaben des Textes einen besonderen Stil hinzu
  :first-lineCSS	Spezielle Stile zur ersten Textzeile hinzufügen
  :before	Inhalt vor dem Element hinzufügen
  :after	Inhalt nach dem Element hinzufügen

• <a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c<p style="text-align: left;"></p></a> Definition der beiden: CSS

Pseudoklassen werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen.

:first-child:first-letter

Pseudoelemente werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen.

p>i:first-child {color: red}<p>
    <i>first</i>
    <i>second</i></p>

:first-child
Differenz

.first-child {color: red}<p>
    <i class="first-child">first</i>
    <i>second</i></p>

Hier verwenden wir Pseudoklasse

und Pseudoelement

zum Vergleich.

p::first-letter {color: red}<p>I am stephen lee.</p>

::first-letter // Pseudoklasse
Stil zum ersten untergeordneten Element hinzufügen

Wenn wir keine Pseudoklasse verwenden und den oben genannten Effekt erzielen möchten, können wir Folgendes tun:

.first-letter {color: red}<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

spanDas heißt, wir fügen dem ersten untergeordneten Element eine Klasse hinzu und definieren dann den Stil dieser Klasse. Dann werfen wir einen Blick auf die Pseudo-Elemente: span

//Pseudo-Elemente

Fügen Sie dem Anfangsbuchstaben Stil hinzu

Wenn wir also keine Pseudo-Elemente verwenden, was sollten wir tun? Was tun wir, um den oben genannten Effekt zu erzielen?

Das heißt, wir fügen dem ersten Buchstaben ein

hinzu und fügen dann

einen Stil hinzu.

Der Unterschied zwischen den beiden ist deutlich geworden. Das heißt:

css3

:Pseudo-classes
::Pseudo-elements

Der Effekt einer Pseudoklasse kann durch Hinzufügen einer tatsächlichen Klasse erreicht werden, während der Effekt eines Pseudoelements durch Hinzufügen eines tatsächlichen Elements erreicht werden muss, weshalb Sie werden als Pseudoklasse bezeichnet, und ein Grund wird als Pseudoelement bezeichnet.

ZusammenfassungDer Grund, warum Pseudoelemente und Pseudoklassen so leicht zu verwechseln sind, liegt darin, dass ihre Auswirkungen ähnlich sind und ihre Schreibmethoden ähnlich sind, aber tatsächlich Um die beiden zu unterscheiden, wurde klar angegeben, dass Pseudoklassen durch einen Doppelpunkt und Pseudoelemente durch zwei Doppelpunkte dargestellt werden. Aufgrund von Kompatibilitätsproblemen verwenden die meisten jedoch immer noch einen einzelnen Doppelpunkt. Unabhängig von Kompatibilitätsproblemen sollten wir jedoch unser Bestes geben, um beim Schreiben gute Gewohnheiten zu entwickeln und zwischen den beiden zu unterscheiden.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen CSS-Pseudoklassen und Pseudoelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!