基础选择器-类选择器

1.基础选择器-类选择器（开发最常用）：如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。语法：结构需要用class属性来调用，在CSS中，类选择器以一个.号表示，后面紧跟我们自定义的类名。长名称或词组可以使用中横线来为选择器命名，不要使用纯数字、中文等命名，尽量使用英文字母来比表示。命名要有意义，尽量让别人一眼就知道该类名的意思。Web前端有一定的命名规范。例：<!D

Blue_lan18

7229人浏览 · 2022-01-18 23:28:35

Blue_lan18 · 2022-01-18 23:28:35 发布

1.基础选择器-类选择器（开发最常用）：如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。

语法：

结构需要用class属性来调用，在CSS中，类选择器以一个.号表示，后面紧跟我们自定义的类名。长名称或词组可以使用中横线来为选择器命名，不要使用纯数字、中文等命名，尽量使用英文字母来比表示。命名要有意义，尽量让别人一眼就知道该类名的意思。Web前端有一定的命名规范。

例：

<!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>
        /* 例1 */
       .titles {
           color: greenyellow;
       }
       .blue {
           color: cyan;
       }
       /* 例2 */
       .green {
           /* 注意是背景颜色 */
           background-color: springgreen;
           width: 100px;
           height: 100px;
       }
       .red  {
           background-color: red;
           width: 100px;
           height: 100px;
       }
    </style>
</head>
<body>
    <!-- 例1 -->
    <h4 class="titles">黄子韬唱过的歌</h4>
    <p>皇冠</p>
    <p>舍不得</p>
    <p>还来得及</p>
    <h4 class="titles">黄子韬染过的发色</h4>
    <div>紫色</div>
    <div class="blue">蓝色</div>
    <div>酒红色</div>
    <!-- 例2 -->
    <div class="green"></div>
    <div class="red"></div>
    <div class="green"></div>
</body>
</html>

浏览器效果图：

基础选择器-类选择器（开发最常用）-多类名使用：

多类名使用方式：

在class属性中写多个类名，多个类名中间必须用空格分开，这个标签就可以具有这些类名的样式。

例：

<!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>
        .blue {
            background-color: blue;
        }
        .black {
            background-color: black;
        }
        .size {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="blue size"></div>
    <div class="black size"></div>
    <div class="blue size"></div>
</body>
</html>

浏览器效果图：