Pseudo-classe CSS

Pseudo-classes CSS

Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux aux sélecteurs.

Syntaxe

Syntaxe de la pseudo-classe :

sélecteur : pseudo-classe {propriété : valeur;

Les classes CSS peuvent également utiliser des pseudo-classes :

selector.class:pseudo-class {property:value;}

pseudo-classe d'ancrage

Dans les navigateurs prenant en charge CSS, différents états des liens peuvent être affichés de différentes manières

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
</head>

<body>
<p><b><a href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

Exécuter un exemple» Cliquez sur le bouton "Exécuter l'exemple" pour afficher l'exemple en ligne

Remarque : Dans la définition CSS, un:hover doit être placé entre un:link et il n'est valable qu'après un: visité.

Remarque : Dans la définition CSS, a:active doit être placé après a:hover pour être valide.

Remarque : Les noms de pseudo-classes ne sont pas sensibles à la casse.

Pseudo-classes et classes CSS

Les pseudo-classes peuvent être utilisées avec les classes CSS :

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">Syntaxe CSS</a>

Si le lien dans l'exemple ci-dessus a été visité , il apparaîtra en rouge.

CSS - :first - pseudo-class enfant

Vous pouvez utiliser la pseudo-classe :first-child pour sélectionner le premier élément enfant d'un élément

Remarque : Dans les versions précédentes d'IE8, <!DOCTYPE> doit être déclaré pour que :first-child puisse prendre effet.

Correspond au premier élément

Dans l'exemple suivant, le sélecteur correspond à l'élément qui est le premier enfant de n'importe quel élément :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Correspond au premier élément parmi tous les éléments

Dans l'exemple suivant, sélectionne tous les éléments >

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p > i:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当 :first-child 作用于 IE8以及更早版本的浏览器,  DOCTYPE必须已经定义.</p>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

correspond à tous les éléments qui sont le premier enfant d'un élément

Dans l'exemple ci-dessous, le sélecteur correspond à tous les éléments ;i> éléments au sein d'un élément enfant :

instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-child i
{
	color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
</html>

Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

CSS - :lang pseudo class

:lang Les pseudo-classes vous donnent la possibilité de définir des règles spéciales pour différentes langues

Remarque : IE8 doit déclarer <!DOCTYPE> pour prendre en charge la pseudo-classe ;lang.

Dans l'exemple suivant, la classe :lang définit le type de guillemets pour l'élément q avec la valeur d'attribut no :

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
q:lang(no)
{
	quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>

Exécuter des instances»

Cliquez sur le bouton « Exécuter des instances » pour afficher les instances en ligne

Plus d'instances

Exemple : Ajouter différents styles aux hyperliens

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</a></b></p>
</body>

</html>

Exécuter l'exemple»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'exemple en ligne

Cet exemple montre comment ajouter des styles supplémentaires aux hyperliens.

Instance : Utiliser : focus

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
input:focus
{
	background-color:yellow;
}
</style>
</head>

<body>
<form action="" method="get">
用户名: <input type="text" name="fname" /><br>
密　码: <input type="text" name="lname" /><br>
<input type="submit" value="Submit" />
</form>

<p><b>注意:</b>仅当 !DOCTYPE已经声明时 IE8支持 :focus.</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne exemple

Cet exemple montre comment utiliser la pseudo-classe :focus.

Tous les pseudo-classes/éléments CSS

< qui n'a pas de lecture seule attribut 🎜>:requiredinput:requiredSélectionnez l'attribut d'élément spécifié par l'attribut "required"rootSélectionnez l'élément racine du document #news:target Sélectionnez l'élément #news actuellement actif (l'URL de clic contient le nom de l'ancre) :validentrée : validSélectionner toutes les propriétés avec des valeurs validesa:linkSélectionner tout liens non visitésa:visitéSélectionner tous les liens visitésa:activeSélectionnez le lien actifa:hoverL'état de placement de la souris sur le lien input:focusSélectionnez l'élément sur lequel avoir le focus après la saisiep:first-letterSélectionnez chaque La première lettre de l'élément p:première ligne Sélectionne la première ligne de chaque élément p:first-childLe sélecteur correspond à l'élément <]p> qui est le premier enfant de n'importe quel élément

Sélecteur	Exemple	Exemple de description
:checked	input:checked	Sélectionner tous les éléments de formulaire sélectionnés
: désactivé	input:disabled	Sélectionner tous les éléments de formulaire désactivés
:vide	p:empty	Sélectionne tous les éléments p sans éléments enfants
:enabled	input:enabled	Sélectionnez tous les éléments de formulaire activés
:first-of-type	p:first-of-type	Sélectionnez le premier p élément enfant de chaque élément parent qui est un p élément
:in-range	input:in-range	Sélectionner les valeurs dans la plage d'éléments spécifiée
:invalid	input:invalid	Sélectionnez tous les éléments invalides
:last-child	p:last-child	Sélectionnez le dernier élément enfant de tous les éléments p
:last-of-type	p:last-of-type	Sélectionne chaque élément p qui est le dernier élément p de son parent
:not(selector)	:not(p)	Sélectionner tous les éléments autres que p
:nth-child(n)	p:nth-child(2)	Sélectionnez le deuxième élément enfant de tous les p éléments
:nth-last-child(n)	p:nth-last-child(2)	Sélectionner tous les p éléments L'avant-dernier élément enfant
:ntième-dernier-de-type(n)	p:ntième-dernier-de-type (2)	Sélectionnez l'avant-dernier sous-élément de p pour tous les p éléments
:nth-of-type(n)	p:nth-of-type(2)	Sélectionnez tous les p éléments dont le deuxième élément enfant est p
: uniquement de type	p:only-of-type	Sélectionnez tous les éléments avec un seul élément enfant p
:only-child	p:only-child	Sélectionnez tous les p éléments avec un seul enfant
:facultatif	input :facultatif	Sélectionner les attributs de l'élément sans "obligatoire"
:hors plage	entrée:hors plage	Sélectionner l'élément attributs avec des valeurs en dehors de la plage spécifiée
:read-only	input:read-only	Sélectionnez les attributs en lecture seule Attribut d'élément
:read-write	input:read-write	Sélectionner l'attribut d'élément

: root
:target

:link
:visité
:active
:hover
:focus
:first-letter
:première ligne
:first-child
:avant	p:before	Insérer du contenu avant chaque élément <p>
:after	p:after	Insérer du contenu après chaque élément <p>
:lang(langue)	p:lang(it)	Sélectionnez une valeur de départ pour l'attribut lang de l'élément <p>

Pseudo-classe CSS

Pseudo-classes CSS

Syntaxe

Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

CSS - :lang pseudo class

Instance

Plus d'instances

Exemple : Ajouter différents styles aux hyperliens

Instance : Utiliser : focus

Tous les pseudo-classes/éléments CSS

Site Web PHP chinois

Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne