搜尋

首頁 >web前端 >css教學 >css3的偽類有哪些

css3的偽類有哪些

青灯夜游
青灯夜游原創
2021-12-09 10:48:212933瀏覽

css3偽類別有：「:first-of-type」、「:last-of-type」、「:only-of-type」、「:only-child」、「:last-child 」、「:root」、「:empty」、「:target」、「:not」等。

css3的偽類有哪些

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3的偽類別

##: out-of-range:out-of-range匹配值在指定區間之外的input元素#3 ##:in-range:read-write :read-only##3##:optional:optional用於符合可選的輸入元素3:required:required用來符合設定了"required" 屬性的元素#3##:valid## :valid用來符合輸入值為合法的元素3#:invalid##:invalid
#選擇器 範例 範例說明 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
:in-range 符合值在指定區間之內的input元素 3
:read-write 用於匹配可讀及可寫入的元素 3
:read-only 用於匹配設定"readonly"（唯讀）屬性的元素
用於匹配輸入值為非法的元素 3

Let’s learn about some css3 pseudo-classes through examples.

:first-of-type

Select all elements that are the first child element of a specific type from their parent element

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

Selects the last element of a specific type that belongs to its parent element All elements of a child element 


<!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-typeSelect all elements that are the only child element of a specific type from their parent element

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

Select every element that is the only child element of its parent element

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)

Select all elements that are the nth child element of any type of its parent element

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

Selects all elements that are the nth child element of any type that belongs to its parent element, counting from the last child element. 

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

Select all elements that are the nth child element of a specific type of their parent element

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

#Selects all elements that are the nth child element of a specific type that belongs to its parent element, starting with the last child element Start counting

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

(Learning video sharing: css video tutorial
)

以上是css3的偽類有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css如何設定一半背景下一篇：css如何設定一半背景

相關文章

看更多