Home > Article > Web Front-end > What are the pseudo-classes of css3?

What are the pseudo-classes of css3?

青灯夜游Original: 2021-12-09 10:48:212889browse

css3 pseudo-classes include: ":first-of-type", ":last-of-type", ":only-of-type", ":only-child", ":last-child" ", ":root", ":empty", ":target", ":not", etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css3 pseudo-class

##:first-of-typep:first-of-typeSelect each p element Is the first p element of its parent3:last-of-typep:last-of-typeSelect the last p element for which each p element is its parent3:only-of-typep :only-of-typeSelects the only p element for which each p element is its parent3:only-childp:only-childSelect each p element that is the only child element of its parent3:nth- child(p:nth-child(2)Select each p element that is the second child element of its parent 3##:nth-last-child(n:nth-of-type(n:nth-last-of-type(n:last-child:root:empty:target##:enabledinput:enabledSelect each enabled input element3:disabledinput:disabledSelect each disabled input element3:checkedinput:checkedSelect each selected input element3:not( selector)Select every element that is not a p element3: out-of-range:out-of-range Matches input elements whose values are outside the specified range3:in-range:in-rangeMatch input elements whose value is within the specified range3:read-write:read-write Used to match readable and writable elements3 :read-only:read-only Used to match elements with the "readonly" attribute set3:optional:optional is used to match optional input elements3:required:required Used to match elements with the "required" attribute set3:valid :valid is used to match elements whose input value is legal3:invalid:invalidUsed to match elements whose input value is illegal3

下面通过示例来了解一些css3伪类。

:first-of-type

选取属于其父元素的特定类型的第一个子元素的所有元素

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

选取属于其父元素的特定类型的最后一个子元素的所有元素

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

选取属于其父元素的特定类型的唯一一个子元素的所有元素

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

：only-child

选取属于其父元素的唯一子元素的每一个元素

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

:nth-child(n)

选取属于其父元素的不限类型的第n个子元素的所有元素

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

选取属于其父元素的不限类型的第n个子元素的所有元素，从最后一个子元素开始计数。

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

选取属于其父元素的特定类型的第n个子元素的所有元素

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

选取属于其父元素的特定类型的第n个子元素的所有元素，从最后一个子元素开始计数

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

（学习视频分享：css视频教程）

Selector	Example	Example Description




n)
)p:nth-last-child(2)	Selecting each p element is the second child of its parent, counting from the last child	3
)p:nth-of-type(2)	Select each p element that is the second p element of its parent	3
)p:nth-last-of-type(2)	Selecting each p element is the second p element of its parent, counting from the last child	3
p:last-child	Selects each p element that is the last child of its parent.	3
:root	Select the root element of the document	3
p:empty	Select every p element (including text nodes) that does not have any children	3
#news:target	Select the currently active #news element (the clicked URL that contains the anchor name)	3



:not(p)

The above is the detailed content of What are the pseudo-classes of css3?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set half background in cssNext article：How to set half background in css

See more

What are the pseudo-classes of css3?

Related articles