Tutoriel CSS (3) Pseudo-classe - Lien dynamique-tutoriel CSS-php.cn

Tutoriel CSS (3) Pseudo-classe - Lien dynamique

巴扎黑

Libérer： 2017-04-01 14:00:55

original

2019 Les gens l'ont consulté

La pseudo-classe peut être considérée comme un sélecteur de classe spécial qui peut être automatiquement reconnu par les navigateurs prenant en charge CSS. Sa plus grande utilité est qu'il peut définir différents effets de style pour les liens dans différents états.

1. Syntaxe

La syntaxe de la pseudo-classe consiste à ajouter une pseudo-classe (pseudo-classe) à la syntaxe d'origine :
sélecteur : pseudo-classe {propriété : valeur }
(Sélecteur : pseudo-classe {attribut : valeur})
La pseudo-classe est différente d'une classe. Elle est déjà définie par CSS. Vous ne pouvez pas utiliser d'autres noms à volonté comme le sélecteur de classe. ci-dessus, il peut être interprété comme un objet (sélecteur) dans un état spécial (pseudo-classe).

Les sélecteurs de classe et autres sélecteurs peuvent également être mélangés avec des pseudo-classes :
selector.class:pseudo-class {property: value}
(selector.class:pseudo-class{property: Value })

2. Pseudo-classes d'ancres

Les plus couramment utilisées sont les 4 pseudo-classes d'éléments a (ancre), qui représentent des liens dynamiques dans 4 états différents : lien, visité , actif, survol (liens non visités, liens visités, liens actifs et liens survolés). Nous définissons respectivement différents effets pour eux :
a:link {color: #FF0000; text-decoration: none} /* Lien non visité*/
a:visited {color: #00FF00; text-decoration : none} /* Lien visité*/
a:hover {color: #FF00FF; text-decoration: underline} /* Passez la souris sur le lien*/
a:active {color: #0000FF; text -decoration: underline} / *Activer le lien*/
(Dans l'exemple ci-dessus, la couleur du lien est rouge et souligné lorsqu'on n'y accède pas, elle est verte et soulignée lorsqu'on y accède, et elle est bleue et soulignée lorsqu'on y accède . , il est violet et souligné lorsque la souris est sur le lien)
Remarque : Parfois, le lien a un effet lorsque la souris pointe dessus avant d'y accéder, mais n'a aucun effet lorsque la souris pointe à nouveau sur le lien après le lien. est accessible. En effet, vous placez a:hover devant a:visited. Dans ce cas, comme ce dernier a une priorité plus élevée, l'effet de a:hover sera ignoré lors de l'accès au lien. Par conséquent, selon l'ordre d'empilement, lorsque nous définissons ces styles de liens, nous devons les écrire dans l'ordre a:link, a:visited, a:hover et a:actived.

3. Sélecteurs de pseudo-classes et de classes

En combinant des pseudo-classes et des classes, vous pouvez créer plusieurs ensembles d'effets de liens différents sur la même page. Par exemple, nous définissons un groupe One. le lien est rouge et bleu après la visite ; l'autre groupe est vert et jaune après la visite :
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a .blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
S'applique désormais à différents liens :
Ceci est le premier ensemble de liens
Ceci est le deuxième ensemble de liens
4. Autres pseudo-classes

De plus, CSS2 définit également des pseudo-classes pour le premier mot et la première ligne (première lettre et première ligne), qui peuvent être utilisées pour modifier la première lettre ou la première ligne. ligne d’un élément. Définissez différents styles.
Regardez cet exemple ci-dessous. Nous définissons la taille de la première lettre du texte dans la marque de paragraphe comme étant 3 fois la taille par défaut :

...