:last-of-type
| p:last-of-type |
Sélectionnez chaque élément p qui est le dernier élément p de son parent |
3 | |
:only-of-type
| p:only-of-type |
Sélectionne le seul élément p pour lequel chaque élément p est son parent |
3 |
|
:only-child
| p:only- child |
Sélectionnez chaque élément p qui est le seul élément enfant de son parent |
3 |
|
:nth-child(n| ) |
p:nth-child(2) |
Sélectionnez chaque élément A p est le deuxième enfant de son parent |
3 |
| :nth-last-child( | n) |
p:nth-last-child(2) |
Sélectionner chaque élément p est le deuxième élément enfant de son parent , en comptant à partir du dernier enfant |
3
|
:nth-of-type( | n) |
p:nth-of-type(2) |
sélectionnez chaque Un élément p est le deuxième élément p de son parent |
3
|
:nth-last-of-type( | n) |
p:nth-last-of-type(2) |
select Chaque élément p est le deuxième élément p de son parent, en comptant à partir du dernier enfant |
3
|
:dernier-enfant |
p:dernier-enfant |
Sélectionnez chaque élément p est son parent Le dernier enfant du niveau. |
3 |
| :root:root |
Sélectionne l'élément racine du document |
3 |
|
:empty
| p:empty |
Sélectionne chaque élément p (y compris les nœuds de texte) qui ne le fait pas avez des enfants) |
3 |
|
:target
| #news:target |
Sélectionne l'élément #news actuellement actif (l'URL cliquée qui contient ce nom d'ancre) |
3 |
|
:enabled
| input :enabled | Sélectionnez chaque élément d'entrée activé |
3 |
|
:disabled
| input:disabled |
Sélectionnez chaque élément d'entrée désactivé |
3 |
|
:checked
| input:checked | Sélectionnez chaque entrée sélectionnée elements |
3 |
|
:not(selector| ) |
:not(p) |
Sélectionnez chaque élément qui n'est pas un élément p |
3 |
| :hors de portée | :out- of-range |
match les éléments d'entrée dont la valeur est en dehors de la plage spécifiée |
3 |
| :in-range:in-range |
match les éléments d'entrée dont la valeur est dans la plage spécifiée |
3 |
|
:read-write
| :read-write |
est utilisé pour faire correspondre les éléments lisibles et inscriptibles |
3 |
|
:read-only
| :read-only |
est utilisé pour correspondre aux paramètres L'attribut "readonly" d'éléments |
3 |
|
:facultatif
| :facultatif |
est utilisé pour faire correspondre les éléments d'entrée facultatifs |
3 |
|
:obligatoire
| :obligatoire |
Correspond aux éléments avec l'ensemble d'attributs "obligatoire" |
3 |
|
:valid
| :valid |
est utilisé pour faire correspondre les éléments dont la valeur d'entrée est légale |
3 |
|
:invalid
| :invalid |
est utilisé Faire correspondre les éléments dont la valeur d'entrée est illégale |
3 |
|
Apprenons quelques pseudo-classes CSS3 à travers des exemples.
:first-of-type
Sélectionne tous les éléments qui sont le premier enfant d'un type spécifique de leur élément parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:first-of-type").css("background-color","pink");
});
</script>
</head>
<body>
<p>p</p>
<div>
<p>p1</p>
<p>p2</p>
</div><br>
<div>
<span>span</span>
<p>p1</p>
<p>p2</p>
</div>
</body>
</html>Copier après la connexion
:last-of-type
Sélectionne tous les éléments qui sont le dernier élément enfant d'un type spécifique de son élément parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:last-of-type").css("background-color","pink");
});
</script>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
</div><br>
<div>
<p>p1</p>
<p>p2</p>
<span>span</span>
</div>
</body>
</html>Copier après la connexion
: only-of-type
Sélectionne le seul élément enfant d'un type spécifique qui appartient à son parent élément tous les éléments
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:only-of-type").css("background-color","pink");
});
</script>
</head>
<body>
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
<div style="border:1px solid;">
<p>p</p>
</div><br>
<div style="border:1px solid;">
<span>span</span>
<p>p</p>
</div><br>
</body>
</html>Copier après la connexion
: enfant unique
Sélectionnez chaque élément
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:only-child").css("background-color","pink");
});
</script>
</head>
<body>
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
<div style="border:1px solid;">
<p>p</p>
</div><br>
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
</body>
</html>Copier après la connexion
:ntième enfant(n)
Sélectionne tous les éléments qui sont le nième élément enfant de n'importe quel type qui appartient à son élément parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:nth-child(3)").css("background-color","pink");
});
</script>
</head>
<body>
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
<div style="border:1px solid;">
<span>div span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
<div style="border:1px solid;">
<p>div2 p1</p>
<p>div2 p2</p>
<p>div2 p3（div 的第三个子元素）</p>
</div>
<p>body p3</p>
</body>
</html>Copier après la connexion
:nth-last-child(n)
Sélectionne le nième élément enfant qui appartient à son élément parent de n'importe quel type Tous les éléments de l'élément enfant , en comptant à partir du dernier élément enfant.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:nth-last-child(3)").css("background-color","pink");
});
</script>
</head>
<body>
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
<div style="border:1px solid;">
<span>div span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
<div style="border:1px solid;">
<p>div2 p1</p>
<p>div2 p2</p>
<p>div2 p3（div 的第三个子元素）</p>
</div>
<p>body p3</p>
</body>
</html>Copier après la connexion
:nth-of-type(n)
Sélectionne tous les éléments qui sont le nième élément enfant d'un type spécifique de leur élément parent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:nth-of-type(3)").css("background-color","pink");
});
</script>
</head>
<body>
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
<div style="border:1px solid;">
<span>div span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
<div style="border:1px solid;">
<p>div2 p1</p>
<p>div2 p2</p>
<p>div2 p3（div 的第三个子元素）</p>
</div>
<p>body p3</p>
</body>
</html>Copier après la connexion
: nième-dernier-de-type
Sélectionne tous les éléments qui sont le nième élément enfant d'un type spécifique de son élément parent, en comptant à partir du dernier élément enfant
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:nth-last-of-type(3)").css("background-color","pink");
});
</script>
</head>
<body>
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
<div style="border:1px solid;">
<span>div span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
<div style="border:1px solid;">
<p>div2 p1</p>
<p>div2 p2</p>
<p>div2 p3（div 的第三个子元素）</p>
</div>
<p>body p3</p>
</body>
</html>Copier après la connexion
( Apprenez le partage vidéo : tutoriel vidéo CSS)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
