CSS 의사 클래스 사용-CSS 튜토리얼-php.cn

CSS 의사 클래스 사용

王林

풀어 주다： 2023-09-03 18:41:01

앞으로

1241명이 탐색했습니다.

CSS 의사 클래스를 사용하여 HTML의 기존 요소에 특정 스타일을 추가할 수 있습니다. 이러한 의사 클래스는 (호버, 액세스, 비활성화 등) 특정 상태의 요소를 선택합니다.

NOTE strong> - CSS 의사를 결합하려면 - 의사 요소가 있는 클래스는 CSS3에서 단일 콜론 표기법을 사용합니다.

Syntax

다음은 요소에서 CSS 의사 클래스를 사용하기 위한 구문입니다.

Selector:pseudo-class {
   css-property: /*value*/;
}

로그인 후 복사

사용 가능한 모든 CSS 의사 클래스는 다음과 같습니다.

< td style="text-align: center;">32829

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"속성없이 언급 된 요소를 선택합니다.
root	문서의 루트 요소를 선택합니다.
Target	현재 언급된 항목을 선택합니다. 활성 요소(해당 요소가 포함된 URL을 클릭하세요. 앵커 이름)
30	有效它选择具有有效值的所有提到的元素
31	访问过它选择所有访问过的提到的元素

示例

让我们看一个 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 伪类

示例

让我们看一下 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>

로그인 후 복사