Was sind die Kategorien von CSS-Selektoren?-Front-End-Fragen und Antworten-php.cn

Was sind die Kategorien von CSS-Selektoren?

醉折花枝作酒筹

Freigeben： 2023-01-06 11:14:43

Original

15270 Leute haben es durchsucht

Die Klassifizierung von CSS-Selektoren ist: 1. Label-Selektor; 3. ID-Selektor; 6. Geerbter Selektor; String-Matching.

Was sind die Kategorien von CSS-Selektoren?

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Was sind die Kategorien von CSS-Selektoren?

(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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Was sind die Kategorien von CSS-Selektoren?

(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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Was sind die Kategorien von CSS-Selektoren?

(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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Was sind die Kategorien von CSS-Selektoren?

(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>

Nach dem Login kopieren

Effekt:

Was sind die Kategorien von CSS-Selektoren?

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!