Pseudo-éléments CSS
CSS Pseudo-élément
Le pseudo-élément CSS est utilisé pour ajouter des effets spéciaux au sélecteur.
Syntaxe
Syntaxe du pseudo-élément :
sélecteur : pseudo-élément {propriété : valeur;
selector.class:pseudo-element {property:value;}
:pseudo de première ligne Élément Le pseudo-élément "première ligne" est utilisé pour définir des styles spéciaux sur la première ligne de texte. Dans l'exemple suivant, le navigateur formatera la première ligne de texte de l'élément p selon le style du pseudo-élément "first-line" :
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>您可以使用:线伪元素添加特殊效果给第一行文本。</p>
</body>
</html>Exécuter le programme Essayez
Remarque : Le pseudo-élément "première ligne" ne peut être utilisé qu'avec des éléments de niveau bloc.
Remarque : Les propriétés suivantes peuvent être appliquées au pseudo-élément "première ligne" :
- propriétés de policepropriétés de couleur propriétés d'arrière-planespacement des motsespacement des lettresdécoration du textealignement vertical
- transformation de textehauteur de ligneclair
: pseudo-élément de première lettre"premier- letter" pseudo-élément Utilisé pour définir un style spécial à la première lettre du texte :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
Exécutez le programme pour l'essayer out
Remarque : Le pseudo-élément "première lettre" ne peut être utilisé qu'avec des éléments de niveau bloc.
Remarque : Les propriétés suivantes peuvent être appliquées au pseudo-élément "première lettre" :
- propriétés de policepropriétés de couleur propriétés d'arrière-planpropriétés de margepropriétés de remplissagepropriétés de borduretext-decoration vertical-align (uniquement si "float" est "none")text-transformline-heightfloatclear
Pseudo-éléments et classes CSSLes pseudo-éléments peuvent être combinés avec des classes CSS :
p.article:first-letter {color:#ff0000; }
<p class="article">Un paragraphe dans un article</p>
L'exemple ci-dessus fera tourner les premières lettres de tous les paragraphes avec article de classe rouge. <p class="article">Un paragraphe dans un article</p>
Plusieurs pseudo-éléments peuvent être utilisés en combinaison avec plusieurs pseudo-éléments. Dans l'exemple ci-dessous, la première lettre du paragraphe apparaîtra en rouge et sa taille de police sera xx-large. Le reste du texte de la première ligne sera bleu et apparaîtra en petites majuscules. Le reste du texte du paragraphe sera affiché dans la taille et la couleur de police par défaut :
Exemple
Exécutez le programme pour l'essayer
Exemple
CSS - :after pseudo-element
< tbody>
<🎜><🎜><🎜> <🎜><🎜><🎜><🎜>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>
Exécutez le programme pour l'essayerCSS - :before pseudo-element
":before" pseudo-élément peut insérer un nouveau contenu avant le contenu de l'élément.
L'exemple suivant insère une image avant chaque élément <h1> :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1:before {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>Exécuter Essayez le programme
CSS - :after pseudo-element
":after" pseudo-élément peut insérer un nouveau contenu après le contenu de l'élément.
L'exemple suivant insère une image après chaque élément <h1> :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1:after {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>Exécutez le programme pour l'essayer
Tous les pseudo-classes/éléments CSS
| Sélecteur | Exemple | < th width="63%" align="left">Exemple de description|||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| :link | a:link | < td>Sélectionner tous les liens non visités|||||||||||||||||||||||||||||||||||||
| :visité | a:visité | Sélectionner tous les liens visités Lien< /td> | ||||||||||||||||||||||||||||||||||||
| :active | a:active | Sélectionnez un lien actif | < tr>:hover | a:hover | L'état de placement de la souris sur le lien | |||||||||||||||||||||||||||||||||
| input:focus | L'élément sélectionné a le focus après la saisie | |||||||||||||||||||||||||||||||||||||
| :first - letter | p:first-letter | Sélectionnez la première lettre
| p:first-line | Sélectionnez la première ligne | élément >||||||||||||||||||||||||||||||||||
| :first-child | p:first-child | Le sélecteur correspond au premier enfant de n'importe quel élément Élément<]p> | ||||||||||||||||||||||||||||||||||||
| :avant | p:avant | Insérer du contenu avant chaque élément | ||||||||||||||||||||||||||||||||||||
| :after | p:after< /td> | Insérer du contenu après chaque élément | ||||||||||||||||||||||||||||||||||||
| :lang(langue) | < td class="notranslate">p:lang(it )Choisissez une valeur de départ pour l'attribut lang de l'élément <🎜> |
||
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>您可以使用:线伪元素添加特殊效果的第一行文本。</p>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
