Puisque l'état change dynamiquement, lorsqu'un élément atteint un état spécifique, il peut acquérir un style de pseudo-classe ; lorsque l'état change, il perdra ce style ; On peut voir que sa fonction est quelque peu similaire à celle d'une classe, mais elle est basée sur une abstraction en dehors du document, c'est pourquoi on l'appelle une pseudo-classe.
La pseudo-classe CSS est une classe spéciale qui fonctionne sur les sélecteurs CSS pour produire des effets spécifiques sur les balises ou éléments sélectionnés.
La syntaxe de la pseudo-classe CSS est la suivante : sélecteur : nom de la pseudo-classe {attribut : valeur de l'attribut}
La pseudo-classe la plus couramment utilisée est la pseudo-classe des hyperliens a. Les liens constituent une partie importante d'un site Web. Vous pouvez voir de nombreux liens sur presque toutes les pages Web. Une conception raisonnable des styles de liens peut ajouter à l'apparence de la page Web. . indiquer. Les liens ont quatre états différents, à savoir lien, visité, actif et survol. Vous pouvez définir différents styles pour les quatre états du lien via les sélecteurs de pseudo-classe suivants :
:link : Définir le style des liens non visités ;
:visited : Définit le style des liens visités ;
:hover : Définit le style lorsque la souris passe ou survole le lien ;
:active : Définit le style lorsque le lien est cliqué.
Exemple:
<html><head></head><body><a>Il n'y a pas de balise href a, la police n'est pas modifiée et il n'y a pas de réponse lorsque la souris est placée dessus</a></br>< ahref=#target=_blank>href est La balise a de # est bleue par défaut et soulignée Lorsque vous placez la souris dessus, elle se transforme en main</a></br><ahref=https://www. .dotcpp.com/target=_blank>href est la balise a de l'URL. L'effet est le même que ci-dessus</a></body></html>.
Résultats en cours d'exécution :
(1):lien
Description : définissez les propriétés de la feuille de style d'un objet avant d'y accéder.
Exemple:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}</style></head><body><ahref=''>Premier lien</a><ahref=''>Deuxième lien</a></body>< /html>Résultats en cours d'exécution :
(2): visité
Description : Définissez l'attribut de feuille de style d'un objet qui est obsolète lorsque son adresse de lien a été accédée.
Exemple:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{background:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>Premier lien</a>< ahref= ''>Deuxième lien</a></body></html>Résultats en cours d'exécution :
(3): survol
Description : Définit les propriétés de la feuille de style d'un objet lors du survol de la souris.
Exemple:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visité{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}</style></head> <body><ahref=''>Premier lien</a><ahref=''>Deuxième lien</a></body></html>Résultats en cours d'exécution :
(4):actif
Description : Définissez les propriétés de la feuille de style de l'objet lorsqu'il est activé par l'utilisateur (un événement qui se produit entre le clic et le relâchement de la souris).
Exemple:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visité{background:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000 ;border:1pxsolidblack;color:white;}</style></head><body><ahref=''>Premier lien</a><ahref=''>Deuxième lien</a>< /body>< /html>Résultats en cours d'exécution :
Un ordre différent lors de la définition du CSS entraînera directement différents effets d'affichage des liens. La raison peut être le « principe de proximité » que les navigateurs suivent lors de l'interprétation du CSS. Ordre correct : a:link, a:visited, a:hover, a:active.