(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!