Pseudo-classe CSS

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>

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Pseudo-classe CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]