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

Heim

Web-Frontend

Front-End-Fragen und Antworten

Was sind die Kategorien von CSS-Selektoren?

May 20, 2021 pm 05:39 PM

css 选择器

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn