Vertiefendes Verständnis der Verwendung von CSS-Pseudoklassenselektoren (Codebeispiele)

Dieser Artikel vermittelt Ihnen ein tiefgreifendes Verständnis der Verwendung von Pseudoklassenselektoren (Codebeispiele). Ich hoffe, dass er Ihnen als Referenz dienen wird.

Vorwort

In der Vergangenheit habe ich sporadisch Pseudoklassen und Pseudoelementselektoren wie :link, ::after und content verstanden und verwendet. Kürzlich habe ich festgestellt, dass darin etwas fehlt Aspekt beim Lesen eines Buches, also beschloss ich, etwas tiefer zu studieren. Das Folgende ist eine Zusammenfassung des Pseudo-Klassenteils.

Pseudoklasse

Mit Pseudoklassenselektoren können Designer im Wesentlichen unterschiedliche visuelle Effekte basierend auf dem spezifischen Zustand des Elements festlegen. Insbesondere: Link, :visited, :hover, :active, :focus, :focus-within, :target, :root und :checked. Die vier klassischen Pseudoklassen von

HTMLAnchorElement

:link werden verwendet, um den Stil des anfänglichen Linkstatus festzulegen.

:visited, used to den Link festlegen Der Stil nach dem Klicken;

:hover, wird verwendet, um den Stil des Links festzulegen, wenn die Maus über den Link bewegt wird;

:aktiv, wird verwendet, um die Maustaste auf zu setzen gedrückt, aber nicht losgelassen werden, der Stil des Links.

Ich glaube, Sie sind alle wie ich. Das erste, mit dem Sie in Kontakt kamen, waren die oben genannten vier Pseudokategorien, oder? ! Und ich muss die Einstellungssequenz (LVAH) auswendig gelernt haben, haha.

Legen Sie den Stil des aktuellen Zielelements fest

Erinnern Sie sich an das Nummernzeichen in der URL? Vom Nummernzeichen (#) bis zum Ende der URL wird der Hash oder das Fragment der URL bezeichnet, das zum Auffinden einer bestimmten Ressource innerhalb der Seite verwendet wird. Gehen Sie davon aus, dass sich auf der Seite jetzt ein Element von

Target

befindet. Solange #title in die Adressleiste eingegeben wird, scrollt der Browser weiter (das Scrollen ist möglicherweise nicht erforderlich). Tweening-Effekte haben), bis sich das Element h3#title an einer bestimmten Stelle im Ansichtsfenster befindet. (Hinweis: Bitte nicht mit UI-Routing verwechseln)
Die oben erwähnte positionierte Seitenressource wird als Zielelement oder aktuell aktives Element bezeichnet! Sein Stil kann über :target festgelegt werden.
Kompatibilität: Unterstützt von IE9.

Beispiel:

// 当前URL为http://foo.com#1
:target {
    color: red;
}
.title{
    color: blue;
    
    &:target{
        border: solid 1px red;
    }
}

.title{I'm not target element.}
.title#1{Yes, I'm.}

Legen Sie den Stil fest, wenn das Element den Fokus erhält

: Der Fokus wird verwendet, um den Stil festzulegen, wenn das Element im Fokus ist.
Kompatibilität: IE8 beginnt mit der Unterstützung.
Welche Elemente unterstützen den Fokuszustand? Dann müssen Sie zunächst herausfinden, welche Operationen verwendet werden können, um den Fokus zu erreichen.
Dies sind:

Mausklick;

Tab-Taste;

Über die HTMLElement.prototype.focus()-Methode von JavaScript.

Dann müssen die Elemente, die traditionell den Fokusstatus unterstützen, a, button, input, select und textareas sein.
Wenn das Element in HTML5 mit dem Attribut contenteditable oder tabindex festgelegt ist, unterstützt das Element den Fokus Zustand.
Das heißt, Elemente, die mit den folgenden Selektoren übereinstimmen, unterstützen den Fokusstatus.

a,button,input,select,textarea,[contenteditable],[tabindex]

Hinweis: Wenn der Tabindex-Attributwert kleiner als 0 ist, kann der Fokus nicht über die Tabulatortaste erreicht werden. Das Element kann jedoch per Mausklick oder Skript in den Fokus gerückt werden.

JS ruft das aktuell fokussierte Element ab

/* 
 * 加载完成时默认返回body
 * 若某元素获得焦点时，则返回该元素
 */
document.activeElement :: HTMLElement

Es gibt auch ein irreführendes Attribut

// 用于检测文档是否得到焦点，即用户是否正在与页面交互
// 页面仅仅位于屏幕可视区域，而用户没有与之交互时返回false。
document.hasFocus :: Void -> Boolean

Legt den Stil des Elements fest, wenn das untergeordnete Element den Fokus erhält

:focus-within wird verwendet, um den Stil des Elements festzulegen, wenn das untergeordnete Element im Fokus ist.
Kompatibilität: Chrome63 wird unterstützt.

Beispiel: Bei der zweiten Bestätigung des Passworts wird das Passwortfeld hervorgehoben

.form-control{
  &:focus-within > input{
    &:focus {
      border: solid 1px skyblue;
    }
    
    &:not(:focus){
      border: solid 1px orange;
    }
  }
}

.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]

Andere

:root, wird verwendet, um den Stil des < festzulegen ;html>-Element, wird ab IE9 unterstützt.

:markiert, wird verwendet, um den ausgewählten Stil des Radios festzulegen und Steuerelemente zu überprüfen, unterstützt ab IE9. Durch die Kombination von Pseudoelement-:before- und Inhaltsattributen können flexible und effiziente benutzerdefinierte Radio- und Prüfkontrollen realisiert werden.

:leer, wird zum Formatieren von Elementen verwendet, die keine untergeordneten Knoten haben. p{} ist ein Element mit dem untergeordneten Knoten TEXT_NODE, während p{} ein Element ohne untergeordneten Knoten ist.

:nicht, als Prädikat, das die Semantik der Negation ausdrückt.

:placeholder-shown, wird verwendet, um den Stil festzulegen, wenn der Elementplatzhalter angezeigt wird.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der Verwendung von CSS-Pseudoklassenselektoren (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!