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

这一片月

2024-05-09 帮助1人

提示：意思我们可以给一个标签可以明命多个类名字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>
</body>
</html>

显示结果：

学新通

总结

这篇好文章是转载于：编程之路