css3的偽類有哪些-css教學-PHP中文網

:nth-of-type(n)

：nth-last-of-type

首頁

web前端

css教學

css3的偽類有哪些

青灯夜游

Dec 09, 2021 am 10:48 AM

css3 偽類

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 <!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> 登入後複製 ##: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 )