What are the pseudo-classes of css3?-CSS Tutorial-php.cn

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

What are the pseudo-classes of css3?

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>

Copy after login

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

Copy after login

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

Copy after login

：only-child

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

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

（学习视频分享：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!