简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  CSS3의 의사 클래스는 무엇입니까?

CSS3의 의사 클래스는 무엇입니까?

青灯夜游
青灯夜游원래의
2021-12-09 10:48:212886검색

css3 의사 클래스에는 ":first-of-type", ":last-of-type", ":only-of-type", ":only-child", ":last-child", "가 포함됩니다. : 루트", ":empty", ":target", ":not" 등

CSS3의 의사 클래스는 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 의사 클래스

selector Example 예제 설명 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 요소가 상위 3
:only-child p:only-인 유일한 p 요소를 선택합니다. child 상위 요소의 유일한 하위 요소인 각 p 요소를 선택합니다. 3
:nth-child(n) p:nth-child(2) 각 A p 요소를 선택합니다. 부모의 두 번째 자식 3
:nth-last-child(n) p:nth-last-child(2) 선택 각 p 요소는 부모의 두 번째 자식 요소입니다. , 마지막 자식부터 계산 3
:nth-of-type(n) p:nth-of-type(2) 선택 각 A p 요소는 해당 항목의 두 번째 p 요소입니다. parent 3
:nth-last-of-type(n) p:nth-last-of-type(2) select 각 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 모두 선택 선택된 입력 elements 3
:not(selector) :not(p) p 요소가 아닌 모든 요소를 ​​선택하세요 3
:out-of-range :out- of-range 값이 지정된 범위를 벗어나는 입력 요소와 일치 3
:in-range :in-range 값이 지정된 범위 내에 있는 입력 요소와 일치 3
:read-write :read-write 는 읽기 및 쓰기 가능한 요소를 일치시키는 데 사용됩니다 3
:read-only :read-only 는 설정과 일치하는 데 사용됩니다. "readonly" 속성 요소 수 3
:선택적 :선택적 은 선택적 입력 요소와 일치하는 데 사용됩니다. 3
:required :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>


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


: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>
 
<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 비디오 튜토리얼)

위 내용은 CSS3의 의사 클래스는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS에서 절반 배경을 설정하는 방법다음 기사：CSS에서 절반 배경을 설정하는 방법

관련 기사

더보기