Vertiefendes Verständnis von CSS-Pseudoklassenselektoren (Codebeispiele)

Der Inhalt dieses Artikels befasst sich mit einem umfassenden Verständnis von CSS-Pseudoklassenselektoren (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

Vorwort

In der Vergangenheit habe ich sporadisch Pseudoklassen und Pseudoelementselektoren wie :link, ::after und content verstanden und verwendet, aber kürzlich habe ich einige gefunden Ich habe beim Lesen eines Buches Mängel in dieser Hinsicht festgestellt, daher beschloss ich, es etwas genauer 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. Im Einzelnen sind dies :link, :visited, :hover, :active, :focus, :focus-within, :target, :root und :checked. Die vier klassischen Pseudoklassen von

HTMLAnchorElement sind

1. :link, die zum Festlegen des Stils des anfänglichen Linkstatus verwendet werden

2. wird verwendet, um den Stil des Links festzulegen, nachdem darauf geklickt wurde.

   :visited

3. wird verwendet, um den Stil des Links festzulegen, wenn die Maus gedrückt wird schwebt über dem Link;

   :hover

4. wird verwendet, um den Linkstil festzulegen, wenn die Maustaste gedrückt, aber nicht losgelassen wird.

   :active

Ich glaube, Sie sind alle wie ich. Das erste, mit dem Sie in Kontakt kamen, waren die oben genannten vier Pseudoklassen, oder? ! Und ich muss die Einstellungssequenz (

) auswendig gelernt haben, haha.

LVAHLegen 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 auf der Seite verwendet wird. Gehen Sie davon aus, dass es jetzt ein

-Element auf der Seite gibt, solange # in die Adressleiste eingegeben wird, scrollt der Browser weiter (das Scrollen hat nicht unbedingt Tweening-Effekte), bis das Element <h3 id="title">Target</h3> gefunden wird an einer bestimmten Position im Sichtbereich. (Hinweis: Bitte nicht mit UI-Routing verwechseln) #title Und die oben erwähnte positionierte Seitenressource heißt h3#titleZielelement
oder aktuell aktives Element! Es kann über gestylt werden. Kompatibilität: Unterstützt von IE9. :target
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.}

Stil festlegen, wenn das Element fokussiert ist

wird verwendet, um den Stil festzulegen, wenn das Element fokussiert ist.

Kompatibilität: IE8 beginnt mit der Unterstützung. :focusWelche Elemente unterstützen den Fokuszustand? Dann müssen Sie zunächst herausfinden, welche Operationen verwendet werden können, um den Fokus zu erreichen.
Sie sind:

Mausklick;
Tab-Taste;
JavaScript übergeben
3. Methode.

   HTMLElement.prototype.focus()

Dann müssen die Elemente, die traditionell den Fokuszustand unterstützen,

,

, a, button und input sein. In HTML5, wenn Wenn ein Element mit dem Attribut select oder textareas festgelegt ist, unterstützt das Element den Fokusstatus.
Das heißt, Elemente, die mit den folgenden Selektoren übereinstimmen, unterstützen den Fokusstatus. contenteditable

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

tabindexHinweis: Wenn der 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 Element ab, das aktuell fokussiert isttabindex

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

Es gibt auch ein irreführendes Attribut

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

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

wird verwendet, um den Stil des Elements festzulegen, wenn das untergeordnete Element im Fokus ist.

Kompatibilität: Chrome63 wird unterstützt.

:focus-withinBeispiel: 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

, das zum Festlegen des verwendet wird
1. Elementstil, unterstützt ab IE9.

   :root<html>

wird verwendet, um den ausgewählten Radiostil festzulegen und Steuerelemente zu überprüfen. Es wird ab IE9 unterstützt. Durch die Kombination der Pseudoelement-Attribute
2. und

   können flexible und effiziente benutzerdefinierte Funk- und Prüfsteuerungen realisiert werden. :checked::beforecontent

wird zum Formatieren von Elementen verwendet, die keine untergeordneten Knoten haben.
3. ist ein Element mit untergeordneten TEXT_NODE-Knoten, während

   ein Element ohne untergeordnete Knoten ist. :emptyp{ }p{}

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

4. :not

wird verwendet, um den Stil festzulegen, wenn der Elementplatzhalter angezeigt wird.

5. :placeholder-shown

   Verwandte Empfehlungen:

CSS-Pseudoklassenselektor

Informationen zur CSS-Pseudoklassenauswahl Device_html/css_WEB-ITnose

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