Que sont les pseudo-classes CSS ? Une brève introduction aux pseudo-classes CSS (avec des exemples)-tutoriel CSS-php.cn

Que sont les pseudo-classes CSS ? Une brève introduction aux pseudo-classes CSS (avec des exemples)

不言

Libérer： 2018-11-02 10:08:08

original

3291 Les gens l'ont consulté

Une pseudo-classe CSS qui permet d'attribuer un état spécifique à un élément. Par exemple, un utilisateur survole une image sur une page Web et celle-ci passe à une autre image. Les liens changent de couleur après avoir été visités et peuvent être distingués des liens non visités. Les zones de saisie du formulaire sont désactivées et n'ont aucune valeur. Les pseudo-classes peuvent implémenter ces opérations et bien plus encore. Les classes CSS ordinaires peuvent également être utilisées avec des pseudo-classes.

CSS3 ajoute plus de pseudo-classes que celles précédemment disponibles en CSS2. (Cours recommandé : Tutoriel vidéo css3) La pseudo-classe

est ajoutée au sélecteur, elle est précédée d'un deux-points, suivi d'un attribut avec une valeur entre parenthèses. La syntaxe d'une pseudo-classe est la suivante

selector: pseudo-class { property:value;}

Copier après la connexion

Pseudo-classes de base

Il existe de nombreuses pseudo-classes différentes, et l'exemple de code suivant en montre quelques-unes. des pseudo-classes les plus élémentaires. Celles-ci sont classées comme pseudo-classes dynamiques, qui changent en raison des actions de l'utilisateur. Dans l'exemple de code, la pseudo-classe :link est utilisée pour définir la couleur du lien sur bleu. Une fois que l'utilisateur visite le lien, la pseudo-classe :visited est utilisée pour changer la couleur du lien en marron. Également démontré : lorsque l'utilisateur survole l'image, le survol est utilisé pour transformer un cercle violet avec du texte blanc en un carré rose avec du texte jaune. La pseudo-classe:Focus modifie le champ de saisie de la date en gris lorsque l'utilisateur clique ou "se concentre" dessus. Exemple de code ici Essayez-le par vous-même !

<!DOCTYPE html>
<html>
<head>
<style>
a:link{
   color:blue;
}
a:visited{
  color:maroon;
}
div {
   background-color: purple;
   color: white;
   line-height:90px;
   font-size:20px;
   text-align:center;
   width:200px;
   height:200px;
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;
    border-radius: 100px;
}
div:hover {
   background-color:pink;
   color:yellow;
   width:200px;
   height:200px;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px;
   border-radius: 0px;
}
input:focus {
  background-color: lightgray;
}
</style>
</head>
<body>
<p><b><a href="//m.sbmmt.com/" target="_blank">Click on this link!</a></b></p>
<div>Hover over this</div>
<p><b>Enter todays date in the field below</b></p>
<form>
Date: <input type="text" name="Date"><br>
</form>
</body>
</html>

Copier après la connexion

Quelques pseudo-classes supplémentaires

Certaines des pseudo-classes les plus couramment utilisées sont répertoriées ci-dessous. Une liste complète de toutes les pseudo-classes peut être trouvée ici.

: first-child - Cette classe vous permet d'ajouter des styles spécifiques à un élément qui est le premier enfant de son parent.

:root- Cette pseudo-classe est utilisée pour correspondre à l'élément racine du document.

: lang- Différentes langues ont des règles et des conventions différentes. Parfois, vous devez créer des pages disponibles en plusieurs langues. La pseudo-classe :lang est utile dans cette situation. Il examine principalement l'attribut HTML lang="" et l'élément et fait correspondre les éléments en conséquence.

: désactivé - Cela vous permet d'indiquer les éléments de saisie désactivés tels que les champs de texte et les boutons.

: plein écran - Cette pseudo-classe utilise un élément en mode plein écran.

Pseudo-éléments

Les pseudo-éléments ont des fonctionnalités similaires aux pseudo-classes dans la mesure où ils peuvent être stylisés par CSS et ajoutés par des agents utilisateurs. Mais elles se distinguent des pseudo-classes dans la mesure où elles permettent d'utiliser des éléments qui n'existent pas dans le DOM. L'identifiant syntaxique des pseudo-éléments est généralement un double deux-points, plutôt qu'un simple deux-points comme les pseudo-classes. Les pseudo-éléments courants sont ::before , ::after et ::first-line . Il est important de noter que certains codeurs utilisent un seul deux-points : pour les pseudo-éléments, c'est une convention en CSS2. Gardez cela à l’esprit pour éviter toute confusion entre pseudo-classes et pseudo-éléments.

Enfin la pseudo-classe

permet d'appliquer des états spéciaux aux éléments. Ils permettent aux développeurs de créer des effets sympas sans utiliser de langages de script comme JavaScript. Il existe de nombreux types différents de pseudo-classes qui vous permettent de rendre vos pages plus interactives et intéressantes tout en gardant votre code simple.

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!