Utiliser des pseudo-classes CSS-tutoriel CSS-php.cn

Utiliser des pseudo-classes CSS

王林

Libérer： 2023-09-03 18:41:01

avant

1241 Les gens l'ont consulté

Nous pouvons ajouter des styles spécifiques aux éléments existants en HTML à l'aide de pseudo-classes CSS, ces pseudo-classes sélectionnent des éléments avec des états spécifiques tels que (survol, accès, désactivé, etc.)

REMARQUE strong> - Afin de combiner les pseudo-classes CSS -les classes avec des pseudo-éléments sont séparées. En CSS3, les pseudo-classes utilisent une notation à deux points.

Syntaxe

Voici la syntaxe d'utilisation des pseudo-classes CSS sur un élément-

Selector:pseudo-class {
   css-property: /*value*/;
}

Copier après la connexion

Voici toutes les pseudo-classes CSS disponibles-

< td style="text-align: center;">3

Sr.No	pseudo-classe et description
1	Activités Il sélectionne les éléments mentionnés par les activités
2	coché Il sélectionne les éléments mentionnés par chaque coché
Désactivé Il sélectionne chaque élément mentionné désactivé
4	vide Il sélectionne chaque élément mentionné qui n'a pas d'enfant
5	activé Il sélectionne chaque élément mentionné qui est activé
6	premier-enfant Il sélectionne chaque élément mentionné qui est le premier enfant de son parent
7	premier-de-type Il sélectionne chaque élément mentionné en premier de son élément parent
8	Focus Il sélectionne celui ci-dessus qui a le focus Element
9	Hover Sélectionne les mentions au survol de la souris
10	Dans la plage Il sélectionne les mentions de valeurs dans la plage spécifiée Élément
11	Invalid Il sélectionne tous les éléments mentionnés avec valeur invalide
12	lang (langue) Il sélectionne chaque mention d'un élément dont la valeur de l'attribut lang commence par "langue"
13	last-child il sélectionne comme dernier enfant de son parent
14	dernier de type Il sélectionne chaque élément mentionné en dernier par son parent
15	Lien Il sélectionne tous les éléments mentionnés non visités
16	not(selector) Il sélectionne tous les éléments qui ne sont pas mentionnés
17	ntième enfant(n) Il sélectionne le nième enfant comme parent Il sélectionne chaque élément mentionné comme nième enfant de son parent, en commençant par le dernier L'enfant commence à compter
19	ntième-dernier -oftype(n) Il sélectionne chaque élément mentionné, c'est-à-dire le nième élément mentionné dans son parent, en commençant par le dernier enfant. Les éléments commencent à compter
20	ntième de type(n) Il sélectionne chaque élément mentionné comme étant le nième élément mentionné dans son parent
21	uniquement de type Il sélectionne chaque élément mentionné comme seule mention de son élément parent
22	enfant unique Il sélectionne comme seul élément enfant Chaque élément mentionné a son parent
23	optionnel Il sélectionne l'élément ci-dessus sans l'attribut "obligatoire"
24	hors plage< /p> Il sélectionne les éléments mentionnés avec des valeurs en dehors de la plage spécifiée
25	lecture seule Il sélectionne les éléments mentionnés en utilisant l'attribut spécifié "lecture seule"
26	read-write it sélectionne les éléments mentionnés sans l'attribut "readonly"
27	requure it sélectionne les éléments mentionnés qui ont l'attribut "requis" spécifié
28	root Il sélectionne l'élément racine du document
29	Target Il sélectionne l'élément actuellement mentionné élément actif (cliquez sur l'URL contenant cet élément) nom de l'ancre)
30	有效它选择具有有效值的所有提到的元素
31	访问过它选择所有访问过的提到的元素

示例

让我们看一个 CSS 伪类的示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

Copier après la connexion

输出

这将产生以下输出 -

使用 CSS 伪类

示例

让我们看一下 CSS 伪类的另一个示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
.child:hover{
   background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

Copier après la connexion