CSS 의사 클래스 사용
- 王林앞으로
- 2023-09-03 18:41:011196검색
CSS 의사 클래스를 사용하여 HTML의 기존 요소에 특정 스타일을 추가할 수 있습니다. 이러한 의사 클래스는 (호버, 액세스, 비활성화 등) 특정 상태의 요소를 선택합니다.
NOTE strong> - CSS 의사를 결합하려면 - 의사 요소가 있는 클래스는 CSS3에서 단일 콜론 표기법을 사용합니다.
Syntax
다음은 요소에서 CSS 의사 클래스를 사용하기 위한 구문입니다.
Selector:pseudo-class {
css-property: /*value*/;
}사용 가능한 모든 CSS 의사 클래스는 다음과 같습니다.
| Sr.No | 의사 클래스 및 설명 |
|---|---|
| 1 | Activities 활동에서 언급된 요소를 선택합니다 |
| 2 |
checked 선택한 각 활동에서 언급된 요소를 선택합니다 |
|
비활성화됨 언급된 모든 비활성화된 요소를 선택합니다 td> |
|
| 4 |
empty 자녀가 없는 언급된 모든 요소를 선택합니다 |
| 5 |
enabled 언급된 모든 요소를 선택합니다. 활성화됨 |
| 6 |
first-child 부모의 첫 번째 자식인 언급된 모든 요소를 선택합니다 |
| 7 |
first-of-type 그것 상위 요소 중 먼저 언급된 모든 요소를 선택합니다 |
| 8 |
Focus 포커스가 있는 위 요소를 선택합니다 |
| 9 td> |
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 |
읽기 전용 지정된 "readonly" 속성을 사용하여 언급된 요소를 선택합니다 |
| 26 -w Read-write td> | it "readonly"속성없이 언급 된 요소를 선택합니다. | 28
| root | 문서의 루트 요소를 선택합니다. | 29
| Target | 현재 언급된 항목을 선택합니다. 활성 요소(해당 요소가 포함된 URL을 클릭하세요. 앵커 이름) |
| 30 |
有效 它选择具有有效值的所有提到的元素 |
| 31 |
访问过 它选择所有访问过的提到的元素 | tr>
示例
让我们看一个 CSS 伪类的示例 -
现场演示
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>输出
这将产生以下输出 -
示例
让我们看一下 CSS 伪类的另一个示例 -
现场演示
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
.child:hover{
background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>输出
这将产生以下输出 -
当未将鼠标悬停在 div 元素上时 -
当鼠标悬停在 div 元素上时 -
위 내용은 CSS 의사 클래스 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!