1. Lvha
sollte eigentlich lvfha sein, nämlich:
a:link {/* 未访问过的超链接的样式 */}
a:visited {/* 访问过的超链接的样式 */}
a:focus {/* 拥有焦点的超链接的样式 */}
a:hover {/* 鼠标悬停的超链接的样式 */}
a:active {/* 被用户输入激活的超链接的样式 */}
Diese 5 sind alle Pseudokategorien, die 5 Zustände darstellen, von denen Link und Besuch Hyperlinks zugeordnet sind und in Link-Pseudokategorien eingeteilt werden können, während Fokus, Hover und Aktiv neben Hyperlinks, die als dynamisch bezeichnet werden, auch auf andere Elemente anwendbar sind Pseudoklasse
Das lvfha-Prinzip lautet, dass diese feste Reihenfolge eingehalten werden sollte, wenn die obigen fünf Pseudoklassen auf Hyperlinks (Tags mit href-Attributen) angewendet werden
2. Pseudoklassen und Pseudoelemente
Pseudoklassen sind wie Klassen, mit denen ein Element ausgewählt wird, das bereits im DOM-Baum vorhanden ist. Es gibt zwei Auswahlbedingungen:
Status: Gibt an, ob sich das Element in einem bestimmten Status befindet, z. B. den Benutzer besucht hat (Link / besucht), den Fokus im Moment hat und sich in einer bestimmten Sprachumgebung befindet (lang).
Struktur: Erfüllt das Element bestimmte strukturelle DOM-Anforderungen, z. B. das Element als ältestes Kind (erstes Kind), das Element als Wurzelelement (Wurzel) und viele strukturierte Pseudoklassen (n-te)? - , -von Typ usw.)
Pseudoelemente ähneln eher Elementen und werden verwendet, um Elemente (oder Teile eines Elements) auszuwählen, die im DOM-Baum nicht vorhanden sind. Verglichen mit der wohlhabenden Familie der Pseudoklassen scheinen Pseudoelemente etwas einsam zu sein. Bis jetzt (04.11.2017) enthält die CSS3-Spezifikation nur noch 4 Pseudoelemente (CSS2.1 ist 4):
Erster Buchstabe: Der erste Buchstabe des im ausgewählten Element enthaltenen Textinhalts (der Textinhalt enthält Unterelemente, dh Text kann über Beschriftungsebenen hinweg ausgewählt werden).
Erste Zeile: Wählen Sie die erste Zeile des im Element enthaltenen Textinhalts aus (wie oben).
Vorher: Für die Inhaltsgenerierung wird ein Element am Anfang des angegebenen Elementinhalts generiert (der generierte Inhalt befindet sich im Elementinhaltsbereich).
after: Generiert für die Inhaltsgenerierung ein Element am Ende des angegebenen Elementinhalts (wie oben).
Der größte Unterschied zwischen einer Pseudoklasse und einem Pseudoelement besteht darin, ob der zu wählende Zielinhalt im DOM vorhanden ist. Die Existenz ist eine Pseudoklasse, und die Nichtexistenz ist ein Pseudoelement. Wenn Sie aus einer anderen Perspektive einen Stil für einen bestimmten Teil des Dokuments angeben möchten, müssen Sie zuerst diesen Teil des Inhalts (über die Auswahl) auswählen. Zu diesem Zeitpunkt treten zwei Situationen auf:
Der Zielinhalt wird zufällig von einem Etikett umschlossen, und durch Festlegen des Stils des gesamten Etiketts kann das Ziel erreicht werden
Vor und nach dem Zielinhalt gibt es keine Beschriftung, und der Stil kann nicht direkt festgelegt werden. Sie müssen eine temporäre Beschriftung einfügen, um den Zielinhalt einzuschließen, und dann den Stil für diese temporäre Beschriftung festlegen
Der erste Fall wird von Pseudoklassen behandelt. Der Pseudoklassen-Selektor wird verwendet, um vorhandene Elemente in einem bestimmten Zustand oder mit bestimmten strukturellen Merkmalen herauszufinden und dann den Stil anzuwenden. Der zweite Fall besteht entweder darin, zusätzliche Tags manuell einzufügen und in den ersten Fall zu konvertieren (einige Szenen können nicht durch Hinzufügen von Tags wie der ersten Zeile oder Szenen über Tag-Ebenen hinweg erstellt werden), oder es kann durch Pseudoelemente gelöst werden, was dem Durchsuchen entspricht Helfen Sie dabei, virtuelle Tags einzufügen, um den Zielinhalt abzugrenzen, und wenden Sie dann den Stil an
PS Weitere Informationen zu CSS3-Selektoren finden Sie in der Zusammenfassung der CSS-Selektorklassifizierung
3. Die sechs Zustände eines Tags Die lvfha-Pseudoklasse bietet fünf Zustände für Hyperlinks, der sechste bezieht sich auf Ankerpunkte, nicht auf Hyperlinks
Eine der Bedeutungen der Existenz der Link-Pseudoklasse besteht darin, zwischen Hyperlinks und Ankern zu unterscheiden. Die Link-Pseudoklasse stimmt nur mit einem Tag mit href (dh einem Hyperlink) überein, nicht mit einem Anker
In einer allgemeinen Desktop-Browser-Umgebung sind die 6 Zustände des a-Tags und das entsprechende Triggerverhalten:
a {/* 处于任意状态的a标签，不论是超链接还是锚点 */}
a:link {/* 未访问过的超链接 */}
a:visited {/* 访问过的超链接，点击超链接再返回当前页，这个超链接就处于visited状态 */}
a:focus {/* 获得焦点的超链接，tab键选中超链接或者长按超链接再移开鼠标 */}
a:hover {/* 鼠标悬停的超链接，鼠标经过超链接时或悬停在超链接上时，这个超链接就处于hover状态 */}
a:active {/* 处于激活状态的超链接，鼠标在超链接上按下时 */}
Unter diesen sind Fokus, Schweben und Aktiv nicht leicht zu unterscheiden. Fokus ist ein kontinuierlicher Zustand, während Schweben und Aktiv Übergangszustände sind. Wenn Sie Schweben und Aktiv weiter unterteilen, ist Letzteres ein spezieller Zustand des ersteren (mit Ausnahme von Berührungsgeräten). ,Z.B:
a:focus {border: 1px solid green;}
a:hover {border-color: red;}
a:active {border-style: dashed;}
Dann sind die entsprechenden Zustände und Stile der folgenden kontinuierlichen Operationen:
按下tab键 -> focus -> 绿色实线边框
点击其它空白处 -> a & link | visited -> 对应样式
鼠标划过时 -> hover -> 无边框
鼠标悬停时 -> hover -> 无边框
鼠标按下 -> focus & hover & active -> 红色虚线边框
鼠标移到超链接之外再抬起 -> focus -> 绿色实线边框
（不点击其它地方的话，超链接将一直处于focus状态）
鼠标划过时 -> focus & hover -> 红色实线边框
Da der Fokus ein Kontinuitätszustand ist, sollte er vor dem vorübergehenden Hover platziert und aktiv sein, da sonst der Hover-Stil beim Wischen der Maus nicht angezeigt wird (gemäß den Kaskadenregeln wird der zuerst deklarierte Hover vom Fokus überschrieben).
Da sich die drei Zustände Fokus, Schweben und aktive Überlappung überschneiden, wird empfohlen, eine bestimmte Deklarationsreihenfolge beizubehalten, damit das kaskadierende Ergebnis den Erwartungen des Stylesheet-Writers entspricht. Und Link und Besuch schließen sich gegenseitig aus, es gibt keine Überschneidungen, daher ist die relative Reihenfolge der beiden nicht wichtig (vlfha ist auch vernünftig, die Reihenfolge "Liebe und Hass" ist nur leicht zu merken). In ähnlicher Weise, da Link / Visited ein permanenter Zustand ist, um dem Übergangszustand und dem dauerhaften Zustand eine Chance zu geben, den Fokus / Schwebeflug / Aktiv hinter sich zu lassen und die Kaskadenpriorität des langen Zustands niedriger zu machen, gibt es also lvfha Prinzip
Darüber hinaus gibt die Spezifikation die Start- und Endbedingungen für die entsprechenden Fokus-, Schwebe- und Aktivzustände nicht eindeutig an:
CSS definiert nicht, welche Elemente sich in den oben genannten Zuständen befinden können und wie diese Zustände ein- und ausgehen. Skripte können ändern, ob das Element auf Benutzerereignisse reagiert und verschiedene Geräte und UAs auf unterschiedliche Weise auf Elemente verweisen und diese aktivieren
CSS 2.1 definiert nicht, ob sich das übergeordnete Element eines Elements ': active' oder ': hover' ebenfalls in diesem Status befindet
(Ab 5.11.3 dynamische Pseudoklassen :: hover ,: active und: focus)
Daher ist es unmöglich, das Triggerverhalten dynamischer Pseudoklassen zu bestimmen, und es kann auch nicht bestimmt werden, auf welche Elemente diese Pseudoklassen anwendbar sind (Formularelemente, Divs usw. können unterstützt werden oder nicht), abhängig von der Implementierung des Benutzeragenten
4. Es wird
empfohlen, die lvfha-Reihenfolge der kombinierten Pseudoklassen einzuhalten, um die Kaskadenregeln zu berücksichtigen. Andernfalls kann es zu einem Überschreiben kommen, was zu ungültigen Regeln mit demselben Namen führt. Z.B:
a:hover {text-decoration: underline overline;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
Der Hover-Stil (Tipp: Zeigen Sie bei Überfahren der Maus sowohl die Über- als auch die Unterstreichung an) wird niemals wirksam, da das Textdekorationsattribut immer von einer der beiden folgenden Optionen überschrieben wird
Voraussetzung ist natürlich, dass bei Konflikten zwischen den Stilregeln (die Attribute des gleichen Namens und der Quelle, der Wichtigkeit und der Spezifität sind dieselben) der Konflikt gemäß der Deklarationsreihenfolge gelöst wird und die lvfha-Reihenfolge zu diesem Zeitpunkt wirklich funktioniert. Mit anderen Worten, wenn es keinen Stilkonflikt gibt, ist die Reihenfolge der Deklaration nicht wichtig
Mit anderen Worten, um Stilkonflikte auf andere Weise zu vermeiden, muss die lvfha-Reihenfolge nicht befolgt werden, z. B. das Kombinieren von Pseudoklassen, um den Status zu erweitern:
/* 不要求顺序 */
:link
:visited
:link:hover
:visited:hover
/* 要求顺序 位于上2行之后 */
:link:active
:visited:active
/* 或者替掉上2行 不要求顺序 */
:link:hover:active
:visited:hover:active
Nach dem Entfalten gibt es keinen überlappenden Zustand, so dass sich jede Regel streng gegenseitig ausschließt und natürlich kein Konflikt besteht
PS Hinweis: Da IE6- die kombinierten Pseudoklassen nicht korrekt verarbeiten kann, wird nur die letzte erkannt, sodass lvha häufiger verwendet wird (tatsächlich ist die Semantik kombinierter Pseudoklassen klarer und es gibt keine "versteckten seltsamen Regeln").
Darüber hinaus können Sie Regeln kaskadieren, um Spezialeffekte zu erzielen, z.
// 用lhva实现只有未访问的链接才有hover效果
a:link {}
a:hover {}
a:visited {}
a:active {}
Sehr interessante Tipps, gleichbedeutend mit:
a:link:hover {}
Dies spiegelt den klaren semantischen Vorteil kombinierter Pseudoklassen wider
Kontaktieren Sie ayqy