2.4多类选择器——多类名（class）

最新推荐文章于 2024-04-26 22:14:41 发布

这一片月

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量3.5k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_62865634/article/details/126077255

版权

提示：意思我们可以给一个标签可以明命多个类名字class

类选择器：

1、多类名使用方式。

2、多类名开发中使用场景

所以标签写了，想下一个不用复值、粘贴：

快捷键：shift+alt+下键

例如：

<div class="red font20">亚</div>

（1）、可以写多个名字类，但是中间必须加一个“空格”

（2）、class多类名

注意：

我们多类名相同样式放在一起，自己独有放在一个类里面

例如：

<div class="red gret background">男孩子</div>

这个就是一个“class”多类名，分工明确

red：颜色

background：背景填充颜色

gret：高、宽

注意：

（1）、各个类名中间用空格隔开。

（2）、简单理解：一个样式多个内名。

（3）、标签可以分为多些类名样式。

（4）、节省时间、方便修改。

（5）、复杂下使用得多

下面自己展示代码：

<!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>
        .gret {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }
        /* 这里设置宽度和高度、还有一个就是文字像素、为什么放这里是因为他们都共同设置了宽高所以放到这里 */
        
        .red {
            color: red;
            /* 这个是每一个方框文字独有的颜色样式 */
        }
        
        pink {
            color: pink;
            /* 这个是每一个方框文字独有的颜色样式 */
        }
        
        .background {
            background-color: aqua;
            /* 这个是背景填充颜色都是共同有的 */
        }
    </style>
</head>

<body>
    <div class="red gret background">男孩子</div>
    <div class="pink gret background">女孩子</div>
    <div class="red gret background">男孩子</div>
    <!-- 这个就是一个选择器类有、多个名字而每一个名字就是有对应的属性：“red”就是颜色红色、“pink”表示粉红色、“gret”表示宽高、“background”表示背景填充颜色 -->
    <!-- 为什么要分怎么明确就是为了后面好修改 -->


</body>

</html>

显示结果：