CSS-Tutorial (3) Pseudoklasse – Dynamischer Link

Pseudoklassen können als spezielle Klassenselektoren betrachtet werden, die von Browsern, die CSS unterstützen, automatisch erkannt werden können. Sein größter Nutzen besteht darin, dass es unterschiedliche Stileffekte für Links in unterschiedlichen Zuständen definieren kann.

1. Syntax

Die Syntax der Pseudoklasse besteht darin, der ursprünglichen Syntax eine Pseudoklasse (Pseudoklasse) hinzuzufügen:
selector:pseudo-class {property: value }
(Selektor: Pseudo-Klasse {Attribut: Wert})
Pseudo-Klasse ist anders als eine Klasse. Sie können nicht nach Belieben andere Namen verwenden Die obige Syntax kann als Objekt (Selektor) in einem speziellen Zustand (Pseudoklasse) interpretiert werden.

Klassenselektoren und andere Selektoren können auch mit Pseudoklassen gemischt werden:
selector.class:pseudo-class {property: value🎜>(selector.class:pseudo-class{property: Value })

2. Pseudoklassen von Ankern

Am häufigsten werden die 4 Pseudoklassen eines (Anker-)Elements verwendet, die dynamische Links in 4 verschiedenen Zuständen darstellen: Link, besucht , aktiv, Hover (unbesuchte Links, besuchte Links, aktive Links und Mouseover-Links). Wir definieren jeweils unterschiedliche Effekte:
a:link {color: #FF0000; text-decoration: none} /* Unvisited link*/
a:visited {color: #00FF00; text-decoration: none} /* Besuchter Link*/
a:hover {color: #FF00FF; text-decoration: underline} /* Maus über Link*/
a:active {color: #0000FF; text -decoration: underline} / *Link aktivieren*/
(Im obigen Beispiel ist die Farbe des Links rot und unterstrichen, wenn nicht darauf zugegriffen wird, sie ist grün und unterstrichen, wenn darauf zugegriffen wird, und sie ist blau und unterstrichen, wenn der Link aktiviert ist . , es ist lila und unterstrichen, wenn sich die Maus auf dem Link befindet)
Hinweis: Manchmal hat der Link eine Wirkung, wenn die Maus vor dem Zugriff darauf zeigt, aber keine Wirkung, wenn die Maus nach dem Link erneut auf den Link zeigt wird zugegriffen. Dies liegt daran, dass Sie a:hover vor a:visited setzen. Da letzteres eine höhere Priorität hat, wird der Effekt von a:hover ignoriert, wenn auf den Link zugegriffen wird. Wenn wir diese Link-Stile definieren, müssen wir sie daher entsprechend der Stapelreihenfolge in der Reihenfolge a:link, a:visited, a:hover und a:actived schreiben.

3. Pseudoklassen und Klassenselektoren

Durch die Kombination von Pseudoklassen und Klassen können Sie mehrere Sätze unterschiedlicher Linkeffekte auf derselben Seite erstellen Link ist nach dem Besuch rot und blau; die andere Gruppe ist nach dem Besuch grün und gelb:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a .blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
Gilt jetzt für verschiedene Links:
Dies ist der erste Satz von Links
Dies ist der zweite Satz von Links
4. Andere Pseudoklassen

Darüber hinaus definiert CSS2 auch Pseudoklassen für das erste Wort und die erste Zeile (erster Buchstabe und erste Zeile), mit denen der erste Buchstabe oder die erste Zeile geändert werden kann Linie eines Elements. Legen Sie verschiedene Stile fest.
Sehen Sie sich dieses Beispiel unten an. Wir definieren die Größe des ersten Buchstabens des Texts in der Absatzmarke auf das Dreifache der Standardgröße:

...

Dies ist ein Absatz, und das erste Wort dieses Absatzes ist vergrößert .

Lassen Sie uns ein weiteres Beispiel für den Stil der ersten Zeile definieren:

......

Dies ist die erste Zeile des Absatzes
Dies ist die zweite Zeile des Absatzes
Dies ist die dritte Zeile des Absatzes

(Im obigen Beispiel ist die erste Zeile des Absatzes rot, und die zweite und dritte Zeile sind die Standardfarben)

Hinweis: Die Pseudoklassen des ersten Wortes und der ersten Zeile müssen von IE5.5 oder höher unterstützt werden.

Das obige ist der detaillierte Inhalt vonCSS-Tutorial (3) Pseudoklasse – Dynamischer Link. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!