css常用的选择器

最新推荐文章于 2025-06-17 20:59:17 发布

东来梁蕴秀

最新推荐文章于 2025-06-17 20:59:17 发布

阅读量664

点赞数 1

CC 4.0 BY-SA版权

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_61973596/article/details/125698109

本文详细介绍了CSS中的各种选择器，包括标签选择器、通配符选择器、类选择器和ID选择器。类选择器因其复用性而常用，ID选择器则用于唯一标识。此外，还探讨了选择器的组合使用，如结合标签选择器，以及如何通过多个类选择器组合应用样式。最后提到了类选择器和ID选择器在实际开发中的比较和使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：最近在学习css，我来整理一下几种最为常用的选择器，好久没写文章了，更新一波

标签选择器

通过标签来选中相应标签，因此对于大型开发，肯定不常用，其格式为:

标签名 {
属性名：属性值;
属性名：属性值;
}

例如,下面的例子是一个h1标签

<!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>测试文件</title>
    <style>
        input {
            width: 100px;
            height: 30px;
        }
    </style>
</head>

<body>
    <lable>密码：<input type="password"></lable>
    <input type="date">
</body>
</html>

通配符选择器

选择所有的标签，这个实际开发更不常用，格式为

* {

属性名：属性值;
属性名：属性值;

}

<!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>测试代码</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>


<body>
    <p>账号登录</p>
    <label for="snum">学号:</label>
    <input type="text" id="snum"><br>
    <label>密码:<input type="password"></label>
    <br>
</body>

</html>

类选择器

类选择器自己创建一个类，在标签中通过class类调用，因此而的名，这个选择器非常常用，重点之重点，其结构为：

.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}

<!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>
        /* 定义类的样式 */
        .control {
            color: orange;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <!-- 在标签中用class调用 -->
    <span class="control">乾坤容我静；名利任人忙。</span>
    <h2 class="control">我劝天公重抖擞；不俱一格降人才。</h2>
</body>

</html>

对了，如果定义了多个类名的话，class=“类名1 类名2”这样的中间用空格隔开，这样就可以调用多个类的性质，这样的设计可以简化代码量，减少冗余

id选择器

id选择器，只能指定一个特定标签属性，只能一对一，经常配合js选择相关标签，其格式#名字{} ,然后在标签的用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>
        #xh {
            background-color: yellow;
        }
    </style>
</head>
<body>
    学号: <input type="text" id="xh"><br>
    姓名: <input type="password" id="xh"><br>
</body>
</html>

在使用时，id只选择一个，方便使用维护。

id选择器和类选择器直接比较

1、id选择器，只能选择一个，相当于关键字，并且一个标签不能调用多个id名。

类选择器可以选择多个标签，并且一个标签可以调用多个类名，来减少代码的冗余。

2、类选择器比较常用，专门设置页眉、页脚、菜单等等相关样式。

3、id选择器选择唯一的标签配合js实现定位和功能。

id选择器，类选择器结合前面标签使用

id选择器和类选择器可以结合前面的标签选择器来使用，举个例子，

假设只想让div标签的背景改为黄色，相关代码，注意中间没有空格

css代码

div.bg {
            background-color: yellow;
        }

html代码

 <div class="bg">天生我材必有用</div>
        学号: <input type="text" class="bg"><br>
        姓名: <input type="password" class="bg"><br>

由于前面的定义使div下的类bg，因此只能选择div标签，所以只有div标签会变成黄色。

多个类选择器的组合

一个标签元素可以调用多个类，举个例子

css样式

  .center {
            text-align: center;
        }
        .err1 {
            color: red;
            /* 【倾不倾斜(font-style) 加不加粗(font-weight)】 字号大小/行高(font-size/line-height) 字体类型(font-family)*/
            font-style: italic;
            font-weight: 700;
            font-size: 50px;
            font-family: 'Times New Roman', Times, serif;
            /* font: italic 700 50px 'Times New Roman', Times, serif; */
        }

 <div class="center err1">程序出现异常</div>

结果使执行两个类所指定的样式。

 .center {
            text-align: center;
        }

        .err1 {
            color: red;
            /* 【倾不倾斜(font-style) 加不加粗(font-weight)】 字号大小/行高(font-size/line-height) 字体类型(font-family)*/
            font-style: italic;
            font-weight: 700;
            font-size: 50px;
            font-family: 'Times New Roman', Times, serif;
            /* 倾斜，加粗，50px，字体 */
        }

        .center.err1 {
            background-color: blue;
        }

        .center.err1.another {
            background-color: yellow;
        }

html代码

  <div class="center">程序出现异常</div>
        <div class="err1">程序出现异常</div>
        <div class="center err1">程序出现异常</div>
        <div class="center err1 another">程序出现异常</div>

第一个标签，只执行center类，居中

第二个，只执行err1类，改为斜体，加粗，50px，字体

第三个执行center err1，但是center err1都在.center.err1中，因此也执行加一个背景蓝色。