css3 의사 클래스에는 ":first-of-type", ":last-of-type", ":only-of-type", ":only-child", ":last-child", "가 포함됩니다. : 루트", ":empty", ":target", ":not" 등
이 튜토리얼의 운영 환경: 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
모든 요소 선택
<!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>
: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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
