CSS 의사 클래스를 사용하여 HTML의 기존 요소에 특정 스타일을 추가할 수 있습니다. 이러한 의사 클래스는 (호버, 액세스, 비활성화 등) 특정 상태의 요소를 선택합니다.
NOTE strong> - CSS 의사를 결합하려면 - 의사 요소가 있는 클래스는 CSS3에서 단일 콜론 표기법을 사용합니다.
다음은 요소에서 CSS 의사 클래스를 사용하기 위한 구문입니다.
Selector:pseudo-class { css-property: /*value*/; }
사용 가능한 모든 CSS 의사 클래스는 다음과 같습니다.
| Sr.No | 의사 클래스 및 설명 |
|---|---|
| 1 | Activities 활동에서 언급된 요소를 선택합니다 |
| 2 | checked 선택한 각 활동에서 언급된 요소를 선택합니다 |
| 비활성화됨 언급된 모든 비활성화된 요소를 선택합니다
|
|
| 4 | empty 자녀가 없는 언급된 모든 요소를 선택합니다 |
| 5 | enabled 언급된 모든 요소를 선택합니다. 활성화됨 |
| 6 | first-child 부모의 첫 번째 자식인 언급된 모든 요소를 선택합니다 |
| 7 | first-of-type 그것 상위 요소 중 먼저 언급된 모든 요소를 선택합니다 |
| 8 | Focus 포커스가 있는 위 요소를 선택합니다 |
| 9 | Hover 마우스 오버 시 언급된 항목 선택 |
| 10 | 범위 내 지정된 범위 내에서 언급된 값을 선택합니다. 요소 |
| 11 | Invalid 언급된 모든 항목을 선택합니다. 값이 잘못된 요소 |
| 12 | lang(언어) lang 속성 값이 "언어" |
| 13 | last-child로 시작하는 요소에 대한 모든 언급을 선택합니다. 그것 부모의 마지막 자식으로 선택 |
| 14 | last-of -type 부모가 마지막으로 언급한 모든 요소를 선택합니다 |
| 15 | link 그것 방문하지 않은 언급된 모든 요소를 선택합니다 |
| 16 | not(selector) 언급되지 않은 모든 요소를 선택합니다. |
| 17 | nth-child(n ) 그것 n번째 자식을 부모로 선택합니다. 언급된 모든 요소를 마지막 요소부터 시작하여 부모의 n번째 자식으로 선택합니다. 자식은 세기를 시작합니다 |
| 19 | nth-last -oftype(n) It 언급된 각 요소, 즉 마지막 하위 요소부터 시작하여 부모에서 n번째 언급된 요소를 선택합니다. 요소 계산이 시작됩니다. 상위 요소에서 n번째 언급된 요소 |
| 21 | only-of-type 언급된 모든 요소를 상위 요소의 유일한 언급으로 선택합니다 |
| 22 | only-child 유일한 하위 요소로 선택합니다. 언급된 각 요소에는 해당 상위 요소가 있습니다. |
| 23 | 선택적 "필수" 속성 없이 위 요소를 선택합니다 |
| 24 | out of range 지정된 범위를 벗어난 값을 가진 언급된 요소를 선택합니다 |
| 25 | 읽기 전용< /p> 지정된 "readonly" 속성을 사용하여 언급된 요소를 선택합니다 |
| 26 -w Read-write | it "readonly"속성없이 언급 된 요소를 선택합니다. | 28
| root | 문서의 루트 요소를 선택합니다. | 29
| Target | 현재 언급된 항목을 선택합니다. 활성 요소(해당 요소가 포함된 URL을 클릭하세요. 앵커 이름) |
| 30 | 有效 它选择具有有效值的所有提到的元素 |
| 31 | 访问过 它选择所有访问过的提到的元素 |
让我们看一个 CSS 伪类的示例 -
现场演示
CSS Anchor Pseudo Classes
这将产生以下输出 -
让我们看一下 CSS 伪类的另一个示例 -
现场演示
CSS Pseudo Classes
这将产生以下输出 -
当未将鼠标悬停在 div 元素上时 -
当鼠标悬停在 div 元素上时 -
위 내용은 CSS 의사 클래스 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
