CSS 선택기의 범주는 무엇입니까?
- 醉折花枝作酒筹원래의
- 2021-05-20 17:39:1715196검색
CSS 선택기의 분류는 다음과 같습니다: 1. 라벨 선택기, 3. ID 선택기, 5. 조합 선택기, 7. 의사 클래스 선택기, 문자열 일치.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS 선택기에는 다양한 유형이 있습니다.
1. 태그 선택기(예: body, p, p, ul, li)를 살펴보겠습니다.
2. 클래스 선택기(예: class="head", class="head_logo").
3. ID 선택기(예: id="name", id="name_txt").
4. 전역 선택기(예: * 기호).
5. 선택기 결합(예: .head .head_logo, 두 선택기는 스페이스바로 구분됩니다.)
6. 선택기를 상속합니다(예: p p, 두 선택기는 스페이스바로 구분됩니다).
7. 의사 클래스 선택기(예: 링크 스타일, 요소의 의사 클래스, 4가지 상태: 링크, 방문, 활성, 호버).
8. 문자열 일치를 위한 속성 선택기(^ $ * 각각 시작, 끝, 포함에 해당하는 세 가지 유형).
위의 8가지 CSS 선택자 중 가장 일반적으로 사용되는 CSS 선택자는 태그 선택자, .class 선택자, ID 선택자, 속성 선택자, 의사 클래스 선택자입니다.
아래에는 5가지 CSS 선택기 각각의 예가 나와 있습니다. (다른 선택기 예는 CSS 매뉴얼을 참조하세요.)
(1) 태그 선택기:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>余生有你</p>
<p>幸得安喜</p>
</body>
</html>효과는 다음과 같습니다:
(2). 클래스 선택자:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.class1{
background-color: blue;
}
.class2{
background-color: brown;
}
</style>
</head>
<body>
<div class="class1">div</div>
<div class="class2">div</div>
<div class="class3">div</div>
</body>
</html>효과는 다음과 같습니다.
(3) ID 선택자:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#class1{
background-color: blue;
}
#class2{
background-color: brown;
}
</style>
</head>
<body>
<div id="class1">div</div>
<div id="class2">div</div>
<div id="class3">div</div>
</body>
</html>효과는 다음과 같습니다.
(4) 속성 선택자:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div[id=class2]{
background-color: brown;
}
</style>
</head>
<body>
<div id="class1">div</div>
<div id="class2">div</div>
<div id="class3">div</div>
</body>
</html> 효과는 다음과 같습니다:
(5) 의사 클래스 선택기:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{
color: brown;
background: cornsilk;
}
a:hover{
text-decoration: none;
color: rgb(252, 0, 0);
}
a:active{
background: rgb(202, 0, 175);
color: rgb(59, 59, 59);
}
a:visited{
color: brown;
background: cornsilk;
}
</style>
</head>
<body>
<a href="#">哈喽，看我，你在干什么</a>
</body>
</html>효과:
추천 학습: css 비디오 튜토리얼
위 내용은 CSS 선택기의 범주는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!