recherche

Maison >interface Web >tutoriel CSS >Quelles sont les pseudo-classes de CSS3 ?

Quelles sont les pseudo-classes de CSS3 ?

青灯夜游
青灯夜游original
2021-12-09 10:48:212933parcourir

Les pseudo-classes CSS3 incluent : ":first-of-type", ":last-of-type", ":only-of-type", ":only-child", ":last-child", " : root", ":empty", ":target", ":not", etc.

Quelles sont les pseudo-classes de CSS3 ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3. Pseudo-classe CSS3

Sélectionnez chacun Le p l'élément est le premier élément p de son parent

3

:last-of-type:only-of-type:only-child:nth-child(nn3n3n3:empty:target:enabled:disabled:checked:not(selector:read-write:read-only:facultatif:obligatoire:valid:invalid

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>


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


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

: enfant unique

Sélectionnez chaque élément 

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
4d0d87937f6c83b675e896c64d3eb7c9 
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f 
c67b6a16d203d2158145f648938699b9
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
  $("p:only-child").css("background-color","pink");
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
 
f7b71bee284ac55b290eb3d1db6a2d39
e388a4556c0f65e1904146cc1a846beep194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beep294b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
 
f7b71bee284ac55b290eb3d1db6a2d39
e388a4556c0f65e1904146cc1a846beep94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
 
f7b71bee284ac55b290eb3d1db6a2d39
e388a4556c0f65e1904146cc1a846beep194b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beep294b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba680c6dc11e160d3b678d68754cc175188a
 
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

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


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


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


( Apprenez le partage vidéo : tutoriel vidéo CSS)

p:last-of-type Sélectionnez chaque élément p qui est le dernier élément p de son parent 3
p:only-of-type Sélectionne le seul élément p pour lequel chaque élément p est son parent 3
p:only- child Sélectionnez chaque élément p qui est le seul élément enfant de son parent 3
) p:nth-child(2) Sélectionnez chaque élément A p est le deuxième enfant de son parent 3
:nth-last-child() 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
:nth-of-type() p:nth-of-type(2) sélectionnez chaque Un élément p est le deuxième élément p de son parent
:nth-last-of-type() 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
: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
p:empty Sélectionne chaque élément p (y compris les nœuds de texte) qui ne le fait pas avez des enfants) 3
#news:target Sélectionne l'élément #news actuellement actif (l'URL cliquée qui contient ce nom d'ancre) 3
input :enabled Sélectionnez chaque élément d'entrée activé 3
input:disabled Sélectionnez chaque élément d'entrée désactivé 3
input:checked Sélectionnez chaque entrée sélectionnée elements 3
) :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 est utilisé pour faire correspondre les éléments lisibles et inscriptibles 3
:read-only est utilisé pour correspondre aux paramètres L'attribut "readonly" d'éléments 3
:facultatif est utilisé pour faire correspondre les éléments d'entrée facultatifs 3
:obligatoire Correspond aux éléments avec l'ensemble d'attributs "obligatoire" 3
:valid est utilisé pour faire correspondre les éléments dont la valeur d'entrée est légale 3
:invalid est utilisé Faire correspondre les éléments dont la valeur d'entrée est illégale 3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment définir la moitié de l'arrière-plan en CSSArticle suivant：Comment définir la moitié de l'arrière-plan en CSS

Articles Liés

Voir plus