多类名选择器

最新推荐文章于 2024-07-06 20:00:00 发布

纯情小码哥

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量1.8k

点赞数 1

分类专栏： CSS 文章标签：多类名选择器

本文链接：https://blog.csdn.net/Liyunhao_haoge/article/details/101939279

版权

CSS 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

多类名选择器
语法:
.类名1 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}
.类名2 {属性4:属性值4; 属性5:属性值5; 属性6:属性值6; ......}
标签调用的时候用： class = "类名1 类名2"

注意:
1)样式显示效果跟HTML元素中的类名先后顺序没有关系,爱CSS样式书写的上下顺序有关.
2)各个类名中间用空格隔开.
多类名选择器在后期布局比较复杂的情况下,还是较多使用的.

类选择器与ID选择器的区别:
类选择是可以重复多次使用的,id只能使用一次.

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.font32{
			font-size: 32px;
		}
		.font20{
			font-size: 20px;
		}
		.colorRed{
			color: red;
		}
		.colorGreen{
			color: green;
		}
	</style>
</head>
<body>
	<div class="font32 colorRed">李白</div>
	<div class="font32 colorGreen">马可波罗</div>
	<div class="font20 colorRed">吕布</div>
	<div class="font20 colorGreen">橘佑京</div>
</body>
</html>

效果如下：