Compréhension approfondie de l'utilisation des sélecteurs de pseudo-classes CSS (exemples de code)

Cet article vous apporte une compréhension approfondie de l'utilisation des sélecteurs de pseudo-classes (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Avant-propos

Dans le passé, j'ai sporadiquement compris et utilisé des pseudo-classes et des sélecteurs de pseudo-éléments tels que :link, ::after et content. Récemment, j'ai trouvé quelque chose qui manquait à cela. aspect en lisant un livre, j'ai donc décidé d'étudier un peu plus en profondeur. Ce qui suit est un résumé de la partie pseudo-classe.

Pseudo-classe

Les sélecteurs de pseudo-classe permettent essentiellement aux concepteurs de définir différents effets visuels en fonction de l'état spécifique de l'élément. Plus précisément : link, :visited, :hover, :active, :focus, :focus-within, :target, :root et :checked. Les quatre pseudo-classes classiques de

HTMLAnchorElement

:link, utilisées pour définir le style de l'état initial du lien

:visited, utilisées pour ; définir le style du lien après avoir cliqué ;

:hover, utilisé pour définir le style du lien lorsque la souris survole le lien

:actif, utilisé pour définir le bouton de la souris sur ; être pressé mais pas relâché, le style du lien.

Je crois que vous êtes tous comme moi. La première chose avec laquelle vous êtes entré en contact a été les quatre pseudo-catégories ci-dessus, n'est-ce pas ? ! Et je viens d'apprendre par cœur la séquence de réglage (LVAH), haha.

Définir le style de l'élément cible actuel

Vous vous souvenez du signe dièse dans l'URL ? À partir du signe dièse (#) jusqu'à la fin de l'URL, on appelle le hachage ou le fragment de l'URL, qui est utilisé pour localiser une certaine ressource dans la page. Supposons qu'il y ait maintenant un élément 3b64331653e4821e59c10723198d239bTarget39528cedfa926ea0c01e69ef5b2ea9b0 tant que #title est saisi dans la barre d'adresse, le navigateur continuera à défiler (le défilement ne sera pas nécessairement effectué). avoir des effets d'interpolation) jusqu'à ce que l'élément h3#title soit situé à un emplacement spécifique dans la fenêtre. (Remarque : veuillez ne pas la confondre avec le routage de l'interface utilisateur)
La ressource de page positionnée mentionnée ci-dessus est appelée l'élément cible ou l'élément actif actuel ! Son style peut être défini via :target.
Compatibilité : pris en charge par IE9.

Exemple :

// 当前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.}

Définir le style lorsque l'élément est mis au point

 : le focus est utilisé pour définir le style lorsque l'élément est mis au point.
Compatibilité : IE8 commence à prendre en charge.
Alors, quels éléments prennent en charge l'état de focus ? Ensuite, vous devez d’abord déterminer quelles opérations peuvent être utilisées pour vous concentrer.
Ce sont :

Clic de souris ;

Touche de tabulation ;

Grâce à la méthode HTMLElement.prototype.focus() de JavaScript.

Ensuite, les éléments qui prennent traditionnellement en charge l'état de focus doivent être a, button, input, select et textareas.
En HTML5, lorsque l'élément est défini avec l'attribut contenteditable ou tabindex, l'élément prend en charge le focus. État.
C'est-à-dire que les éléments qui correspondent aux sélecteurs suivants prennent en charge l'état de focus.

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

Remarque : Si la valeur de l'attribut tabindex est inférieure à 0, le focus ne peut pas être obtenu via la touche Tab. Mais l'élément peut obtenir le focus via un clic de souris ou un script.

JS obtient l'élément actuellement ciblé

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

Il existe également un attribut trompeur

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

Définir le style de l'élément

:focus-within est utilisé pour définir le style de l'élément lorsque l'élément enfant est dans l'état focus.
Compatibilité : Chrome63 est pris en charge.

Exemple : Lors de la deuxième confirmation du mot de passe, la case du mot de passe est mise en surbrillance

.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]

Autres

:root, utilisé pour définir le style de l'élément 100db36a723c770d327fc0aef2ce13b1, pris en charge à partir d'IE9.

 : coché, utilisé pour définir le style sélectionné de radio et de contrôle des commandes, pris en charge à partir d'IE9. La combinaison des attributs de pseudo-élément ::before et de contenu peut réaliser des contrôles radio et de contrôle personnalisés flexibles et efficaces.

 : vide, utilisé pour styliser les éléments qui n'ont pas de nœuds enfants. p{} est un élément avec un nœud enfant TEXT_NODE, tandis que p{} est un élément sans nœud enfant.

:non, comme prédicat exprimant la sémantique de la négation.

:placeholder-shown, utilisé pour définir le style lorsque l'espace réservé de l'élément est affiché.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!