css3の擬似クラスとは何ですか?-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2022-02-25 18:33:07

オリジナル

2952 人が閲覧しました

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

親要素の唯一の子要素であるすべての要素を選択します

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

任意のタイプの親要素の 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 サイトの他の関連記事を参照してください。