Rumah >hujung hadapan web >tutorial css >Apakah kelas pseudo css3?

Apakah kelas pseudo css3?

青灯夜游asal: 2021-12-09 10:48:212940semak imbas

kelas pseudo css3 termasuk: ":first-of-type", ":last-of-type", ":only-of-type", ":only-child", ":last- anak" ”, “:root”, “:kosong”, “:sasaran”, “:bukan”, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

css3 pseudo-class

选择器	示例	示例说明	CSS
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 "readonly"（只读）属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 "required" 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3

Mari kita pelajari tentang beberapa kelas pseudo css3 melalui contoh.

:jenis pertama

Memilih semua elemen yang merupakan anak pertama daripada jenis tertentu ibu bapa mereka

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

: jenis terakhir

memilih jenis tertentu yang tergolong dalam elemen induknya Semua elemen elemen anak terakhir

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

: jenis sahaja

Memilih semua elemen yang merupakan satu-satunya elemen anak bagi jenis tertentu daripada induknya

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

: anak tunggal

Pilih setiap elemen yang merupakan satu-satunya elemen anak daripada induknya

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

: ke- -child(n)

Memilih semua elemen

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

iaitu unsur anak ke-nth dari sebarang jenis yang merupakan elemen induknya

:nth-last-child(n)

Memilih semua elemen kepunyaan elemen anak ke-n bagi sebarang jenis elemen induknya, bermula dari A terakhir elemen kanak-kanak untuk mula mengira.

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

Pilih semua elemen yang merupakan unsur anak ke-n bagi jenis tertentu unsur induknya

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

: nth-last-of-type

Memilih semua elemen yang merupakan anak ke-nth dari jenis tertentu unsur induknya, bermula dari Elemen anak terakhir mula mengira

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

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah kelas pseudo css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menetapkan separuh latar belakang dalam cssArtikel seterusnya：Bagaimana untuk menetapkan separuh latar belakang dalam css

Artikel berkaitan

Lihat lagi