溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css3的偽類是什么

發(fā)布時間：2021-12-09 11:06:56 來源：億速云 閱讀：154 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“css3的偽類是什么”，在日常操作中，相信很多人在css3的偽類是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css3的偽類是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3的偽類

選擇器示例示例說明CSS
:first-of-typep:first-of-type選擇每個p元素是其父級的第一個p元素3
:last-of-typep:last-of-type選擇每個p元素是其父級的最后一個p元素3
:only-of-typep:only-of-type選擇每個p元素是其父級的唯一p元素3
:only-childp:only-child選擇每個p元素是其父級的唯一子元素3
:nth-child(n)p:nth-child(2)選擇每個p元素是其父級的第二個子元素3
:nth-last-child(n)p:nth-last-child(2)選擇每個p元素的是其父級的第二個子元素，從最后一個子項計數(shù)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元素，從最后一個子項計數(shù)3
:last-childp:last-child選擇每個p元素是其父級的最后一個子級。3
:root:root選擇文檔的根元素3
:emptyp:empty選擇每個沒有任何子級的p元素（包括文本節(jié)點）3
:target#news:target選擇當(dāng)前活動的#news元素（包含該錨名稱的點擊的URL）3
:enabledinput:enabled選擇每一個已啟用的輸入元素3
:disabledinput:disabled選擇每一個禁用的輸入元素3
:checkedinput:checked選擇每個選中的輸入元素3
:not(selector):not(p)選擇每個并非p元素的元素3
::selection::selection匹配元素中被用戶選中或處于高亮狀態(tài)的部分3
:out-of-range:out-of-range匹配值在指定區(qū)間之外的input元素3
:in-range:in-range匹配值在指定區(qū)間之內(nèi)的input元素3
:read-write:read-write用于匹配可讀及可寫的元素3
:read-only:read-only用于匹配設(shè)置 "readonly"（只讀） 屬性的元素3
:optional:optional用于匹配可選的輸入元素3
:required:required用于匹配設(shè)置了 "required" 屬性的元素3
:valid:valid用于匹配輸入值為合法的元素3
:invalid:invalid用于匹配輸入值為非法的元素3

下面通過示例來了解一些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>

css3的偽類是什么

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

css3的偽類是什么

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

css3的偽類是什么

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

css3的偽類是什么

: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>
 
<h2>body h2</h2>
<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>

css3的偽類是什么

:nth-last-child(n)

選取屬于其父元素的不限類型的第n個子元素的所有元素，從最后一個子元素開始計數(shù)。

<!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>
 
<h2>body h2</h2>
<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>

css3的偽類是什么

: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>
 
<h2>body h2</h2>
<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>

css3的偽類是什么

：nth-last-of-type

選取屬于其父元素的特定類型的第n個子元素的所有元素，從最后一個子元素開始計數(shù)

<!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>
 
<h2>body h2</h2>
<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>

css3的偽類是什么

到此，關(guān)于“css3的偽類是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手