Pseudo-classes et pseudo-éléments CSS
1. Pseudo-classes et pseudo-éléments
css introduit les concepts de pseudo-classes et de pseudo-éléments pour les informations de format en dehors de l'arborescence du document. En d’autres termes, les pseudo-classes et pseudo-éléments sont utilisés pour modifier des parties qui ne sont pas dans l’arborescence du document, comme la première lettre d’une phrase ou le premier élément d’une liste. Les pseudo-classes et pseudo-éléments sont expliqués respectivement ci-dessous :
Pseudo-classe est utilisée pour ajouter des styles correspondants aux éléments existants lorsqu'ils sont dans un certain état sur lequel cet état est basé. le comportement de l'utilisateur et les changements dynamiques. Par exemple, lorsque l'utilisateur survole un élément spécifié, nous pouvons utiliser :hover pour décrire l'état de cet élément. Bien qu'elle soit similaire à une classe CSS ordinaire et puisse ajouter des styles aux éléments existants, elle ne peut ajouter des styles aux éléments que lorsqu'elle se trouve dans un état qui ne peut pas être décrit par l'arborescence DOM, c'est pourquoi elle est appelée pseudo-classe.
Le pseudo-élément est utilisé pour créer des éléments qui ne sont pas dans l'arborescence du document et leur ajouter des styles. Par exemple, nous pouvons utiliser :before pour ajouter du texte devant un élément et ajouter des styles à ce texte. Bien que le texte soit visible par l'utilisateur, il ne se trouve pas réellement dans l'arborescence du document.
2. La différence entre les pseudo-classes et les pseudo-éléments
Voici deux exemples pour illustrer la différence entre les deux.
Ce qui suit est un simple fragment de liste HTML :
<ul>
<li>Je suis le premier< ;/ li>
<li>Je suis le deuxième</li>
</ul>
Si tu veux pour ajouter un style au premier élément, vous pouvez ajouter une classe au premier <li> et définir le style correspondant dans la classe :
HTML :
<ul> ;
<li class="first-item">Je suis le premier</li>
<li>Je suis le deuxième </li>
</ul>
CSS:
li.first-item {couleur : orange}
S'il n'est pas nécessaire d'ajouter une méthode de classe, nous pouvons y ajouter des styles en définissant la pseudo-classe :first-child du premier <li>. À l'heure actuelle, l'élément <li> modifié se trouve toujours dans l'arborescence du document.
HTML :
<ul>
<li>Je suis le premier</li>
< li>Je suis le deuxième</li>
</ul>
CSS:
li:first-child {color: orange}
Voici un autre fragment de paragraphe HTML simple :
<p>Bonjour tout le monde, et j'aimerais que vous ayez une bonne journée !</p>
Si vous souhaitez ajouter un style à la première lettre du paragraphe, vous pouvez envelopper un élément <span> dans la première lettre et définir le style de l'élément span :
HTML :
<p><span class="first">H</span>bonjour tout le monde et je vous souhaite une bonne journée !</p>
CSS :
.premier {taille de police : 5em;}
Si vous ne créez pas d'élément <span>, nous pouvons y ajouter des styles en définissant le pseudo-élément :first-letter de <p>. À l'heure actuelle, il semble qu'un élément <span> virtuel soit créé et que des styles soient ajoutés, mais en fait, cet élément <span> n'existe pas dans l'arborescence du document.
HTML :
<p>Bonjour tout le monde et je vous souhaite une bonne journée !</p>
CSS :
p:first-letter {font-size: 5em;}
Comme le montre l'exemple ci-dessus, l'objet opérationnel du pseudo -class est le document. Un élément existe déjà dans l'arborescence, tandis qu'un pseudo-élément crée un élément en dehors du numéro du document. Par conséquent, la différence entre les pseudo-classes et les pseudo-éléments est : si crée un élément en dehors de l'arborescence du document.
L'origine de la confusion entre pseudo-classes et pseudo-éléments
Le plus déroutant, probablement la plupart des gens appellent avec désinvolture des pseudo-éléments comme :before et :after pseudo-classes, et même si les concepts sont confus, il n'y a pas de problème dans l'utilisation réelle - car même si les concepts sont confus, il n'y a pas de problème. problème en utilisation réelle. Combien de problèmes cela va-t-il causer :)
Exigences de la spécification CSS3 Utilisez des doubles deux-points (::) pour représenter les pseudo-éléments pour distinguer les pseudo-éléments. éléments et pseudo-classes, par exemple, les pseudo-éléments tels que ::before et ::after utilisent des doubles deux-points (::), et les pseudo-classes telles que :hover et :active utilisent des deux-points simples (:). À l'exception de certains navigateurs inférieurs à IE8, la plupart des navigateurs prennent en charge la méthode de représentation double deux-points (::) des pseudo-éléments.
Utilisation de pseudo-classes et pseudo-éléments
Pseudo classe
1 :lien Sélectionnez un lien non visité
2 :visité Sélectionnez le lien visité
3 :survolez Sélectionnez l'élément sur lequel flotte le pointeur de la souris
4 : actif Sélectionnez le lien actif
5 :focus Sélectionnez le champ de saisie pour obtenir le focus
:premier - pseudo-classe enfant
correspond au premier élément enfant de l'élément.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
li:first-child {
color: orange;
}
</style>
<body>
<ul>
<li>这里的文本是橙色的</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:pas de pseudo-classe
Une pseudo-classe négative utilisée pour faire correspondre les paramètres qui font ne correspondent pas aux éléments de sélection de l'appareil.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
li:not(.first-item) {
color: orange;
}
</style>
<body>
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>: pseudo-classe lang
: lang correspond aux éléments qui définissent une langue spécifique. La définition d'une langue spécifique peut être transmise. pour les éléments HTML Définissez l'attribut lang="", définissez l'attribut charset="" de l'élément méta ou définissez l'attribut de langue sur l'en-tête http.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
</style>
<body>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
</body>
</html>Pseudo-élément
::before/:before pseudo-élément
:before insère du contenu avant l'élément sélectionné. Vous devez utiliser l'attribut content pour spécifier le contenu à insérer. Le contenu inséré ne se trouve pas réellement dans l’arborescence du document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
h1:before {
content: "Hello ";
}
</style>
<body>
<h1>World</h1>
</body>
</html>::after/:after pseudo-élément
:after insère du contenu après l'élément. Son utilisation et ses caractéristiques sont similaires à : avant .
::première-lettre/:première-lettre pseudo-élément
: first -letter correspond à la première lettre du texte d'un élément. L'initiale modifiée ne figure pas dans l'arborescence du document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
h1:first-letter {
color:#ff0000;
font-size:xx-large;
}
</style>
<body>
<h1>World 观察第一个字母</h1>
</body>
</html>::première ligne/:pseudo-élément de première ligne
:first-line correspond à la première ligne de texte de l'élément. Ce pseudo-élément ne peut être utilisé que dans des éléments de bloc, pas dans des éléments en ligne.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
p:first-line {
background: orange;
}
</style>
<body>
<p>Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }，
to set them apart from pseudo-classes. You may see this sometimes in CSS.
CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility，
and we would advise that you stick with this syntax for the time being.</p>
</body>
</html>
