Le rôle des sélecteurs de pseudo-classe dans CSS peut être considéré comme crucial.Si CSS n'a pas de sélecteurs de pseudo-classe, de nombreux effets doivent être complétés à l'aide de js. Cela augmentera non seulement la quantité de code, mais également la rendre. c'est difficile à entretenir. Une charge de travail aussi lourde pour les programmeurs va également à l'encontre de l'objectif du CSS, qui est d'améliorer l'efficacité du développement et de réaliser un développement de meilleure qualité dans le même monde.
Les sélecteurs de pseudo-classe incluent les sélecteurs d'objets de pseudo-classe et de pseudo-classe. Les sélecteurs de pseudo-classe utilisent un deux-points (:) comme identifiant de préfixe. Vous pouvez ajouter un sélecteur avant les deux-points pour limiter la portée de l'application de la pseudo-classe. Après les deux-points se trouvent les noms de pseudo-classe et d'objet de pseudo-classe. Il n'y a pas d'espace avant et après les deux-points, sinon cela sera considéré comme un. sélecteur de classe, comme indiqué sur la figure.
Le tableau suivant contient la plupart des sélecteurs de pseudo-classes :
Pseudo-classe dynamique
Les pseudo-classes dynamiques sont un type de styles comportementaux. Ces styles n'existent pas en HTML et ne peuvent être reflétés que lorsque les utilisateurs interagissent avec la page. Les sélecteurs de pseudo-classe dynamiques de pseudo-classe incluent deux formes :
Pseudo-classe d'ancrage, qui est le style le plus courant dans les liens, tels que :link, :visited.
Les pseudo-classes de comportement sont également appelées pseudo-classes d'opérations utilisateur, telles que :hover, :active et :focus.
Par souci de simplicité dans l'enseignement, je l'écris en ligne. Dans les applications réelles, il n'est pas recommandé de l'utiliser en ligne.
:lien
Définissez le style du lien hypertexte avant de sauter. L'utilisation est la suivante :
<ahref=#target=_blank>Sauter</a>
Si vous souhaitez définir le style avant le lien hypertexte ci-dessus pour avoir une couleur de police rouge et aucun soulignement, vous pouvez le définir comme ceci.
:visité
Cette pseudo-classe est juste l'opposé de :link :link est le style avant le lien, et :visited est le style après le lien, c'est-à-dire le style du lien hypertexte après avoir été visité.
<ahref=#target=_blank>Sauter</a>:li
Dans l'apprentissage quotidien, tout le monde peut écrire ensemble les liens avant et après, ce qui est pratique, rapide et sémantique ; cela fait que de nombreux étudiants ne savent pas que ces deux pseudo-classes ont un effet de couverture. Les exemples suivants peuvent vous aider à avoir une compréhension générale :
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; text-decoration:underline;}</style></head><body><ahref=login.htmltarget=_blank>Sauter</a></body></html>Le code ci-dessus est le lien de saut de la page HTML vers la page de connexion. Le rendu après exécution est le suivant :
:flotter
Le sélecteur de pseudo-classe :hover est utilisé pour les effets de style lorsque l'utilisateur déplace la souris sur l'élément. Il n'est pas seulement utilisé pour les hyperliens, mais peut également être appliqué à de nombreux éléments, tels que les boutons. Lorsque vous déplacez la souris dessus, vous constaterez que la couleur d'arrière-plan nord du bouton devient plus sombre ou change de couleur. Bien sûr, il existe d'autres façons de le configurer, mais il n'y a aucun doute : le survol est le moyen le plus simple et le plus rapide. Ici, je vais d'abord présenter les techniques d'utilisation des hyperliens, puis les développer et les utiliser pour modifier l'effet après le déplacement de la souris sur l'élément.
Si vous souhaitez que l'élément change de couleur lorsque la souris survole un élément tag, le code est le suivant :
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>Sauter</a></body></html> 
Développer
Le code structure est le suivant :
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;}</style></head><body><div>:hover</div></body></html>Lorsque l'effet souhaité est que lorsque la souris passe sur l'élément div, la couleur d'arrière-plan passe au noir et la police passe au blanc. Le code est le suivant :
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;transition:all1s;}div:hover{background:black;color:white;}</style></head><body><div>:hover</div></body>< /html>:actif
:active est utilisé pour les effets de style lorsque l'utilisateur clique sur un élément. Il est principalement utilisé dans les contrôles de formulaire. Lorsque l’utilisateur clique, cela a pour effet d’appuyer sur un bouton. Pour la même raison, je l'ai mis dans la zone d'extension.
Lorsqu'un lien hypertexte est cliqué, je souhaite changer la couleur de la police du lien hypertexte. Le code d'implémentation est le suivant :
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>Sauter</a></body></html>Développer
Cet exemple utilise un div pour imiter un bouton. Le style de bouton fourni avec HTML est difficile à décrire en un mot. Il est facile d'imiter et de contrôler le style.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;background :green;font-size:24px;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{background:orange;color:white;}</style></head ><body><div>Bouton</div></body></html>:se concentrer
:focus est utilisé pour styliser l'effet lorsqu'un élément polyvalent devient focus. Ceci est souvent utilisé sur les éléments de contrôle de formulaire.
Code structure :
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ corps></html>
Lorsque vous souhaitez que l'entrée soit ciblée, la couleur d'arrière-plan est #CCC et le code d'implémentation est :
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;}</style></head><body><formaction =#method=post><inputtype=text></form></body></html>Vous pouvez voir l'effet de style du changement de la couleur d'arrière-plan en couleur cible une fois que l'entrée a obtenu le focus.
Choses à noter :
(1) Le sélecteur de pseudo-classe ci-dessus suit le principe d'ordre, c'est-à-dire un lien vers visité pour survoler puis vers la pseudo-classe active.
(2) Survol et actif sont inclus dans la pseudo-catégorie de comportement utilisateur.
premier enfant
La pseudo-classe first-child peut correspondre au premier élément enfant sous l'élément parent spécifié. Par exemple, ul li:first-child peut correspondre au premier élément <li> sous l'élément <ul>. L'exemple de code est le suivant :
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*Faire correspondre la première balise <li>sous <ul>*/color:red;}</style></head>< body> <ul><li>programmation dotcpp</li><li>programmation dotcpp</li><li>programmation dotcpp</li></ul></body></html>Résultats en cours d'exécution :
ast-enfant
Semblable à first-child, la pseudo-classe last-child peut correspondre au dernier élément enfant sous l'élément parent spécifié. Par exemple, ul li:last-child peut correspondre au dernier élément <li> sous l'élément <ul>. l'exemple de code est le suivant :
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*Faire correspondre la dernière balise <li>sous <ul>*/color:red;}</style></head><body > <ul><li>programmation dotcpp</li><li>programmation dotcpp</li><li>programmation dotcpp</li></ul></body></html>Résultats en cours d'exécution :
nième enfant
La pseudo-classe nth-child est nouvelle dans CSS3. Elle peut correspondre au nième élément enfant sous l'élément spécifié. Par exemple, ul li:nth-child(2) peut correspondre au deuxième élément <li> sous l'élément <ul>. . L'exemple de code est le suivant :
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*Faites correspondre la deuxième balise <li>sous <ul>*/color:red;}</style></ head> <body><ul><li>programmation dotcpp</li><li>programmation dotcpp</li><li>programmation dotcpp</li></ul></body></html>Résultats en cours d'exécution :
