CSS3의 의사 클래스는 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

青灯夜游

Dec 09, 2021 am 10:48 AM

css3의사 클래스

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

모든 요소 선택

nbsp;html>


<meta> 
<title></title> 
<script>
</script>
<script>
$(document).ready(function(){
  $("p:only-child").css("background-color","pink");
});
</script>


 
<div>
<p>p1</p>
<p>p2</p>
</div><br>
 
<div>
<p>p</p>
</div><br>
 
<div>
<p>p1</p>
<p>p2</p>
</div><br>

: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 id="body-nbsp-h">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 id="body-nbsp-h">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 id="body-nbsp-h">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 id="body-nbsp-h">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>