Comment sélectionner des balises en CSS-tutoriel CSS-php.cn

Comment sélectionner des balises en CSS

WBOY

Libérer： 2021-12-03 16:34:56

original

6181 Les gens l'ont consulté

Comment sélectionner les balises en CSS : 1. Utilisez le sélecteur d'identifiant, la syntaxe est "#id name {css code;}" ; 2. Utilisez le sélecteur de classe, la syntaxe est ".class name {css code;}" ; 3. Utilisez le sélecteur de balise, la syntaxe est "tag name {css code;}" 4. Utilisez le sélecteur de caractères génériques, la syntaxe est "*{css code;}".

Comment sélectionner des balises en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment sélectionner des balises en CSS

Il existe quatre façons de sélectionner des balises en CSS, et il existe également 4 sélecteurs.

1. Le sélecteur d'identifiant

trouve l'étiquette unique correspondante dans l'interface actuelle en fonction du nom d'identifiant spécifié, puis définit l'attribut

#id名称 {
属性：值;
}

Copier après la connexion

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        #p1 {
            color: red;
        }
        #p2 {
            color: green;
        }
        #p3 {
            color: blue;
        }
    </style>
</head>
<body>
<p id="p1">大多数人的帅，都是浮在表面的，是外表的帅</p>
<p id="p2">而EGON，不仅具备外表帅，内心更是帅了一逼</p>
<p id="p3">EGON就是我，我就是EGON</p>
</body>
</html>

Copier après la connexion

2, le sélecteur de classe

en fonction de la classe spécifiée. Nom de la classe, recherchez la balise correspondante dans l'interface actuelle, puis définissez les attributs

  .类名称 {
属性：值;
}

Copier après la connexion

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            color: green;
        }
        .p3 {
            color: blue;
        }
    </style>
</head>
<body>
<p class="p1">大多数人的帅，都是浮在表面的，是外表的帅</p>
<p class="p2">而EGON，不仅具备外表帅，内心更是帅了一逼</p>
<p class="p3">EGON就是我，我就是EGON</p>
</body>
</html>
#练习
第一行与第三行的颜色都是红色
第一行与第二行的字体大小都是50px
第二行与第三行内容有个下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            font-size: 50px;
        }
        .p3 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p class="p1 p2">第一行内容</p>
<p class="p2 p3">第二行内容</p>
<p class="p1 p3">第三行内容</p>
</body>
</html>

Copier après la connexion

3. Sélecteur de balise

Selon le nom de balise spécifié, recherchez toutes les balises portant ce nom dans l'interface actuelle, puis définissez les attributs

标签名称 {
属性：值;
}

Copier après la connexion

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>EGON美丽的外表下其实隐藏着一颗骚动的心</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>这颗心叫做七巧玲珑心，男人吃了会流泪，女人吃了会怀孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

Copier après la connexion

4. Sélecteur de caractères génériques

Sélectionner toutes les balises

   * {
        属性：值；
    }

Copier après la connexion

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style type="text/css">
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h1 >我是标题</h1>
    <p >我是段落</p>
    <a href="#">我是超链接</a>
</body>
</html>

Copier après la connexion

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!