Pseudoklassen - die Grundlagen

(adaptiert aus "HTML5 & CSS3 für die reale Welt" von Alexis Goldstein, Louis Lazaris und Estelle Weyl)

Kernpunkte

Die Pseudoklasse mit

CSS wird verwendet, um den speziellen Zustand eines Elements zu definieren, einschließlich Struktur, Benutzeroperationen, Eingabe und negativen Pseudoklassen. Sie können Elemente basierend auf der Position des Elements im Dokumentbaum, der Benutzerinteraktion, des Formularelementstatus oder Elements stylen, die nicht mit einem bestimmten Selektor übereinstimmen.

Einige Pseudoklassen haben möglicherweise Sicherheitsprobleme, wie z. Moderne Browser beschränken die Stile, die auf :visited angewendet werden können, um dieses Problem zu verhindern. Um die Zugänglichkeit zu verbessern, wird empfohlen, :visited hinzuzufügen, wo :hover enthalten ist, da nicht alle Besucher die Maus verwenden, um die Website zu durchsuchen. :focus

Während die meisten modernen Browser alle CSS-Pseudoklassen unterstützen, unterstützen einige ältere Browser möglicherweise nicht bestimmte Pseudoklassen wie

und :nth-child(). JavaScript-Bibliotheken wie Selektivizr können verwendet werden, um diese Pseudoklassen in Browsern zu finden, die nicht Unterstützung wie Internet Explorer haben. :nth-last-child()

CSS Pseudo-Klasse

Sie sind möglicherweise bereits mit einigen Pseudoklassen der Benutzerinteraktion vertraut, nämlich

, :link, :visited, :hover, :active und :focus.

Wichtige Tipps: Schlüsselpunkte

:visited Die Pseudo-Klasse hat möglicherweise Sicherheitsprobleme, sodass der Browser nicht die Anwendung aller CSS-Eigenschaften auf dem besuchten Link unterstützt. Ohne diese Einschränkungen kann eine böswillige Website überprüfen, ob der Benutzer eine beliebte Website oder Bank für den Stil der besuchten Links besucht hat (z. B. ein für jede besuchter Link -App eindeutiges Hintergrundbild). Auf diese Weise kann ein Angreifer den Browserverlauf des Benutzers ohne Erlaubnis anzeigen. Daher begrenzen moderne Browser die Stile, die auf :visited angewendet werden können. Die Spezifikation erlaubt diese Änderungen ausdrücklich und besagt, dass Benutzeragenten (UAS) alle Links als nicht erreichte Links behandeln oder andere Maßnahmen zum Schutz der Privatsphäre der Benutzer implementieren und gleichzeitig unterschiedliche Arten von zugänglichen und nicht erreichten Links präsentieren können. Um die Zugänglichkeit zu verbessern, fügen Sie :hover hinzu, wo :focus enthalten ist, da nicht alle Besucher die Maus verwenden, um Ihre Website zu durchsuchen. :hover kann auf jedes Element auf der Seite angewendet werden, nicht nur Links und Formularsteuerungen. :focus und :active beziehen sich auf Links, Formularkontrollen, bearbeitbare Inhaltselemente und jedes Element mit tabindex Attributen.

Während Sie diese grundlegenden Pseudoklassen schon seit einiger Zeit verwendet haben, gibt es viele andere Pseudoklassen. Einige dieser Pseudoklassen sind seit Jahren in der Spezifikation, wurden jedoch nicht unterstützt (oder allgemein verstanden), bis die Browser mit der Unterstützung neuer HTML5-Formeigenschaften begannen, die sie relevanter machen. Die folgenden Pseudo-Klasse entspricht Elementen, die auf Attributen, Benutzerinteraktionen und Formularsteuerungsstatus basieren:

• :enabled: Das aktivierte Benutzeroberflächenelement ist im Grunde jede Formregelung, die das Attribut disabled unterstützt, dieses Attribut jedoch derzeit nicht anwendet.
• :disabled: Stattdessen, Deaktiviertes Benutzeroberflächenelement: Jedes Formularsteuerung, das das Attribut disabled unterstützt und derzeit dieses Attribut angewendet hat.
• :checked: Ein Optionsfeld oder ein Kontrollkästchen, das ausgewählt oder überprüft wurde.
• :indeterminate: Das Formularelement, das weder ausgewählt noch nicht ausgewählt wird. Wenn Sie beispielsweise das Kontrollkästchen alle Kontrollkästchen auswählen, um einen Satz von Kontrollkästchen auszuwählen und dann einige, aber nicht alle Kontrollkästchen in der Gruppe zu entscheiden ausgewählt oder ungeprüft.
• :target: Dieser Selektor wählt das Zielelement des Ankerpunkts auf der aktuell aktiven Seite aus. Dies klingt komplizierter als tatsächlich: Sie wissen bereits, dass Sie einen Link zu einem Anker auf der Seite erstellen können, indem Sie vor der ID des Ziels das # -Scharakter verwenden. Sie haben beispielsweise möglicherweise einen Link "zum Inhalt überspringen" auf Ihrer Seite und nach dem Klicken auf diesen Link wird er mit ID "Inhalt" zu einem Element mit ID "Inhalt" springt. Dies ändert die URL in der Adressleiste in thispage.html#content, und der :target -Alektor entspricht nun mit der ID "Inhalt" dem Element im Dokument. Es ist wie Sie vorübergehend den Selektor #content aufgenommen haben. Wir sagen "temporär", denn sobald der Benutzer auf einen anderen Ankerpunkt klickt, stimmt :target mit dem neuen Ziel überein.
• :default: angewendet auf ein oder mehrere UI -Elemente, die Standardwerte in einer Reihe ähnlicher Elemente sind. Wenn beispielsweise ein Optionsfeld in einer Reihe von Optionsfeldern mit demselben Namen ausgewählt wird, wenn die Seite geladen wird, stimmt sie weiterhin mit :default überein, nachdem ein weiteres Optionsfeld in der Gruppe mit demselben Namen ausgewählt wurde. In ähnlicher Weise wird das Kontrollkästchen, das ausgewählt wurde, wenn die Seite geladen wurde, nach dem Deaktivieren weiterhin mit :default übereinstimmt.
• :valid: Elemente, die basierend auf Typ, Muster oder anderen Eingabemeigenschaften gültig sind (wie wir in Kapitel 4 diskutiert haben).
• :invalid: leere erforderliche Elemente und Elemente, die die Anforderungen der Typ- oder Musterattributdefinitionen nicht erfüllen können.
• :in-range: Elemente mit Bereichsgrenzen und Werten innerhalb dieser Grenzen. Dies gilt beispielsweise bis Datum/Zeit-, Anzahl- und Bereicheingangstypen mit min und max Eigenschaften. Wenn der Wert null ist, ist er :in-range.
• :out-of-range: Antonym von :in-range: Ein Element, dessen Wert seine Bereichsgrenze überschreitet. Fehlende Werte liegen nicht im Bereich, da sie leer sind.
• :required: Die Formregelung mit dem Attributsatz :required.
• :optional: Alle Formsteuerungen ohne :required Attribute.
• :read-only: Das Element des Benutzers kann seinen Inhalt nicht ändern. Die meisten davon sind Elemente mit Ausnahme der Elemente mit dem Attributsatz contenteditable und dem Formularfeld.
• :read-write: Der Benutzer kann Elemente seines Inhalts ändern, z. contenteditable

In Browsern, die Eigenschaften in ihren Formsteuerungen unterstützen, ist die Browserunterstützung für diese Eigenschaften abgeschlossen. IE8 und frühere Versionen unterstützen nicht

, required, pattern und :valid. Die gute Nachricht ist, dass IE9 diese Selektoren unterstützt, jedoch nicht die Selektoren der Benutzeroberfläche. IE10 und IE11 Support :invalid, :checked und :enabled, unterstützen jedoch nicht :disabled, :target, :indeterminate, :required, :optional, :default oder :in-range. Während die Unterstützung immer noch fehlt, können JavaScript-Bibliotheken wie selektivizr dazu beitragen, diese Pseudoklassen im Internet Explorer zu finden. :out-of-range :read-only :read-write FAQs für CSS-Pseudoklasse (FAQs)

(Der FAQS-Teil wird hier weggelassen, da die Länge zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Einige FAQs können selektiv aufbewahrt oder nach Bedarf umgeschrieben werden und bleiben mit der ursprünglichen Bedeutung konsistent.)

Das obige ist der detaillierte Inhalt vonPseudoklassen - die Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!