Heim >Web-Frontend >Front-End-Fragen und Antworten >Was sind die Kategorien von CSS-Selektoren?
Was sind die Kategorien von CSS-Selektoren?
- 醉折花枝作酒筹Original
- 2021-05-20 17:39:1715274Durchsuche
Die Klassifizierung von CSS-Selektoren ist: 1. Label-Selektor; 3. ID-Selektor; 6. Geerbter Selektor; String-Matching.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Es gibt viele Arten von CSS-Selektoren
1 Tag-Selektoren (z. B. body, p, p, ul, li).
2. Klassenselektor (z. B.: class="head", class="head_logo").
3. ID-Selektor (z. B. id="name", id="name_txt").
4. Globaler Selektor (z. B. *-Zeichen).
5. Kombinieren Sie Selektoren (z. B.: .head .head_logo, bitte beachten Sie, dass die beiden Selektoren durch die Leertaste getrennt sind).
6. Erben Sie den Selektor (z. B. p p, beachten Sie, dass die beiden Selektoren durch die Leertaste getrennt sind).
7. Pseudoklassenselektor (zum Beispiel: Linkstil, Pseudoklasse eines Elements, 4 verschiedene Zustände: Link, besucht, aktiv, Hover.).
8. Attributselektoren für den String-Abgleich (^ $ * drei Typen, entsprechend Start, Ende und Einschluss).
Die am häufigsten verwendeten CSS-Selektoren unter den oben genannten acht CSS-Selektoren sind Tag-Selektoren, .class-Selektoren, ID-Selektoren, Attribut-Selektoren und Pseudoklassen-Selektoren.
Nachfolgend geben wir ein Beispiel für jeden dieser fünf CSS-Selektoren: (Weitere Selektorbeispiele finden Sie im CSS-Handbuch)
(1) Label-Selektor:
<!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>Der Effekt ist wie folgt:
(2 ). Klassenauswahl:
<!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>Der Effekt ist wie folgt:
(3) ID-Auswahl:
<!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>Der Effekt ist wie folgt:
(4) Attributauswahl:
<!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> Der Effekt ist wie folgt:
(5) Pseudoklassenselektor:
<!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>Effekt:
Empfohlenes Lernen: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWas sind die Kategorien von CSS-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!