ホームページ > 記事 > ウェブフロントエンド > css3の擬似クラスとは何ですか?

css3の擬似クラスとは何ですか?

青灯夜游オリジナル: 2021-12-09 10:48:212888ブラウズ

css3 疑似クラスには、「:first-of-type」、「:last-of-type」、「:only-of-type」、「:only-child」、「:last-」が含まれます。 child" "、":root"、":empty"、":target"、":not" など。

css3の擬似クラスとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css3 疑似クラス

##:first-of-typep:first-of-type各 p 要素を選択します。最初の要素です。親の p 要素3:last-of-typep:last-of-typeSelect各 p 要素がその親である最後の p 要素 #3:only-of-typep :only-of-type 各 p 要素がその親である唯一の p 要素を選択します3:only-childp: only-child親の唯一の子要素である各 p 要素を選択します3:nth-child(p:nth-child(2)親の 2 番目の子要素である各 p 要素を選択します 3##:nth-last-child(n:nth-of-type(n:nth- last-of-type(n:last-child:root:empty:target3input:enabled##3#input:disabled##3 selector##3##3:in -range:in-range値が指定された範囲内にある入力要素と一致します3:read- write:read-write 読み取り可能および書き込み可能な要素を照合するために使用されます3 :read-only:read-only 「readonly」属性が設定された要素と一致するために使用されます3:optional:optional は、オプションの入力要素と一致するために使用されます3:required:required :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>

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

#:n 番目のタイプ(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 ビデオチュートリアル)

セレクター	例	例の説明	CSS




n )
)p:nth-last-child(2)	各 p 要素を選択すると 2 番目の子になります最後の子から数えて親の	#3
)p :nth-of-type(2)	親の 2 番目の p 要素である各 p 要素を選択します	3
)p:nth-last-of-type(2)	各 p 要素を選択すると、その親の 2 番目の p 要素が選択されます。最後の子から数えて	3
p:last-child	各 p 要素を選択しますそれは親の最後の子です。	3
:root	ドキュメントのルート要素を選択します	3
p:empty	子を持たないすべての p 要素 (テキストノードを含む) を選択します	3
#news:target	現在アクティブな #news 要素 (アンカー名を含むクリックされた URL) を選択します。		##:enabled
有効な各入力要素を選択します		#:disabled	#無効化された各入力要素を選択します
#:checked	input:checked	選択した各入力要素を選択します	3
:not(	)	:not(p)	p 要素ではないすべての要素を選択
#: 範囲外:out-of-range	指定された範囲外の値を持つ入力要素と一致します




# # 「required」属性を持つ要素を照合するために使用されます。 set	3		:valid
は、次の目的で使用されます。入力値が正当である要素と一致する

以上がcss3の擬似クラスとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSで半分の背景を設定する方法次の記事：CSSで半分の背景を設定する方法

続きを見る