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

Le contenu de cet article porte sur une compréhension approfondie des sélecteurs de pseudo-classe CSS (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, mais récemment j'en ai trouvé lacunes dans cet aspect lors de la lecture d'un livre, j'ai donc décidé de l'é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, ce sont :link, :visited, :hover, :active, :focus, :focus-within, :target, :root et :checked. Les quatre pseudo-classes classiques de

HTMLAnchorElement

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

2. , utilisé pour définir le style du lien après avoir cliqué sur celui-ci ; :visited

3. , utilisé pour définir le style du lien lorsque la souris est en survolant le lien :hover

4. , utilisé pour définir le style du lien lorsque le bouton de la souris est enfoncé mais non relâché. :active

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

), haha. LVAH

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 # sur la page. Tant que <h3 id="title">Target</h3> est saisi dans la barre d'adresse, le navigateur continuera à défiler (le défilement n'a pas nécessairement d'effets d'interpolation) jusqu'à ce que l'élément #title soit localisé. à un endroit précis de la zone visuelle. (Remarque : veuillez ne pas le confondre avec le routage de l'interface utilisateur) h3#title Et la ressource de page positionnée mentionnée ci-dessus est appelée
élément cible ou élément actif actuel ! Il peut être stylisé 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

est utilisé pour définir le style lorsque l'élément est mis au point. :focusCompatibilité : 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.
Ils sont :

1. Clic de souris ;

2. Touche de tabulation ;

3. Passer JavaScript

   méthode. HTMLElement.prototype.focus()

Ensuite, les éléments qui prennent traditionnellement en charge l'état de focus doivent être

, a, button, input et select en HTML5, quand. Lorsqu'un élément est défini avec l'attribut textareas ou
, l'élément prend en charge l'état de focus. contenteditableC'est-à-dire que les éléments qui correspondent aux sélecteurs suivants prennent en charge l'état de focus. tabindex

Remarque : Si la valeur de l'attribut

a,button,input,select,textarea,[contenteditable],[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.

tabindexJS obtient l'élément actuellement ciblé

Il existe également un attribut trompeur

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

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

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

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. :focus-within
Exemple : Lors de la deuxième confirmation du mot de passe, la case du mot de passe est mise en surbrillance

Autres

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

1. pour les paramètres

   Style d'élément, pris en charge à partir d'IE9. :root<html>

2. est utilisé pour définir le style sélectionné de radio et de contrôle des commandes. Il est pris en charge à partir d'IE9. La combinaison des attributs de pseudo-élément

   et :checked permet de réaliser des contrôles radio et de contrôle personnalisés, flexibles et efficaces. ::beforecontent

3. , utilisé pour styliser les éléments qui n'ont pas de nœuds enfants.

   est un élément avec des nœuds enfants TEXT_NODE, tandis que :empty est un élément sans nœuds enfants. p{ }p{}

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

   :not

5. est utilisé pour définir le style lorsque l'espace réservé de l'élément est affiché.

   :placeholder-shown

Recommandations associées :

Sélecteur de pseudo-classe CSS

À propos de la sélection de pseudo-classe CSS javascript_html/css_WEB-ITnez

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!