Pseudo-classes CSS -- Pseudo-Classes
Les pseudo-classes CSS font partie du sélecteur CSS
Le nom de la pseudo-classe est sensible à la casse. La sensibilité dépend du langage. du document. En HTML Le document n'est pas sensible à la casse, mais le document XML est sensible à la casse
les pseudo-classes en anglais sont des pseudo-classes
La connexion entre les styles en CSS. et les éléments des documents HTML sont généralement basés sur les éléments présents à l'emplacement du document, cette approche répond à la plupart des besoins. Cependant, en raison des limitations de la structure du document HTML, certains effets ne peuvent pas être obtenus, comme les événements déclenchés par certaines actions de l'utilisateur. Voici quelques exemples :
Lorsque l'utilisateur déplace la souris sur un élément HTML<🎜. >
Quitter l'élément HTML
Cliquer sur l'élément HTML
la pseudo-classe peut être utilisée pour les changements de statut du document, les événements dynamiques, etc., tels que le clic de souris de l'utilisateur sur un élément et des liens non visités
Les pseudo-classes classent les éléments à travers leurs trois caractéristiques : nom, attributs ou contenu. En principe, c'est une fonctionnalité qui ne peut pas être obtenue dans les documents HTML
Pseudo-classe CSS :link
:link -- CSS :link pseudo-classe, adaptée aux liens qui n'ont pas été visité par les utilisateurs
Syntaxe : :link
Version CSS : CSS1
Description :
convient aux liens qui n'ont pas été visités par les utilisateurs
Les terminaux utilisateur (tels que les navigateurs) affichent généralement les liens non visités et les liens visités différemment. CSS fournit les pseudo-classes :link et :visited pour distinguer les liens dans les deux états
.
Les liens non visités et les liens visités s'excluent mutuellement
link, qui signifie "lien" en chinois
Définissez la couleur du lien spécifié :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 伪类示例，对指定链接设置颜色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a class="dreamdu" href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html> CSS : visité pseudo classe
Syntaxe : :visited
Version CSS : CSS1
URL de référence : http://www.dreamdu.com/ css/pseudo -class_visited/
Explication :
S'applique aux liens qui ont été visités par les utilisateurs
Les terminaux utilisateurs (par exemple : les navigateurs) affichent généralement les liens non visités et les liens visités différemment Pour les liens, CSS fournit les pseudo-classes :link et :visited pour distinguer deux liens de statut
Les liens non visités et les liens visités s'excluent mutuellement
visité, chinois "visité" Signification
Syntaxe
:visited
a:visited
a.class:visited
Exemple
a:visited
{
couleur : vert;
}
Le style du lien visité défini ci-dessus est vert
La langue du document détermine quels éléments constituent la chaîne source du lien hypertexte. Par exemple, en HTML, la pseudo-classe link s'applique à un élément avec des attributs href. Par conséquent, les deux déclarations CSS suivantes sont équivalentes
a:visited
{
color: green;
}
:visited
{
couleur : vert ;
}
Conseil : Pour les liens qui ont été visités, le navigateur enregistrera les informations de visite, veuillez effacer les données mises en cache du navigateur avant de visualiser l'exemple ci-dessous
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 伪类示例，设置已访问链接的颜色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html> CSS :hover pseudo-classe
convient lorsque le curseur (pointeur de la souris) pointe vers un élément, mais cet élément n'est pas Style lorsqu'il est activé
Syntaxe : :hover
Version CSS : CSS2
Description :
S'applique lorsque le curseur (pointeur de la souris) pointe sur un élément, mais que cet élément n'est pas activé
Le client (navigateur) peut modifier son effet de rendu en fonction de l'interaction de l'utilisateur avec lui. CSS fournit trois pseudo-classes pour cette situation : hover, active, focus
Les trois pseudo-classes ci-dessus ne le sont pas. Mutuellement exclusifs, un élément peut s'appliquer à plusieurs d'entre eux en même temps
:pseudo-classe hover, qui s'applique lorsque l'utilisateur pointe sur un élément, comme par exemple la souris de l'utilisateur pointe sur un paragraphe p. Lorsque l'utilisateur quitte l'élément avec la souris, le style d'affichage original de l'élément est restauré
hover, qui signifie "rester, survoler" en chinois
Syntaxe
: hover
a:hover
a.class:hover
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 伪类示例</title>
<style type="text/css" media="all">
a:hover
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="http://www.php.cn">点击跳转</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div>
</body>
</html>pseudo-classe d'ancrage
dans les navigateurs prenant en charge CSS Dans le navigateur, différents états du lien peuvent être affichés de différentes manières
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :anchor 伪类示例</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="#" 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> Remarque : Dans la définition CSS, a:hover doit être placé après a:link et a:visited to être efficace.
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.
CSS : pseudo-classe du premier enfant
Syntaxe : :premier enfant
Version CSS : CSS2
URL de référence : http://www.dreamdu.com/css/pseudo-class_first-child/
Description :
correspond au premier élément enfant d'autres éléments, par exemple : dans un div En incluant plusieurs éléments p, pour faire correspondre le premier élément p, vous pouvez utiliser : la pseudo-classe du premier enfant
first, qui signifie « premier » en chinois, qui signifie « progéniture, nœud enfant » en chinois ;
Syntaxe
:premier-enfant
E:premier-enfant
E1>E2 : premier-enfant
Exemple
p >code:premier-enfant
{
couleur:lime;
fond:rouge;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>这是个测试</p>
<p>这是个测试</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>Pseudo-classe CSS :lang
: La pseudo-classe lang vous donne la possibilité de définir des règles spéciales pour différents langages
Remarque : IE8 doit déclarer <!DOCTYPE> pour prendre en charge la pseudo-classe ;lang.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>
section suivante