前端笔记23——CSS多元素选择器

最新推荐文章于 2024-08-04 14:27:56 发布

原创最新推荐文章于 2024-08-04 14:27:56 发布 · 789 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #CSS #多元素选择器

前端专栏收录该内容

93 篇文章

订阅专栏

本文深入探讨了CSS中多元素选择器的应用，通过具体代码实例展示了如何同时为多个具有相同属性的元素设置样式，是前端开发者的实用指南。

前言

前面有分享我学习到的相邻选择器，这里要分享是多元素选择器。

多元素选择器

多元素选择器是指有多个元素具有相同的属性的情况下，运用符号，来进行多元素选择，下面看代码实例就明白了：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 200px;
			}
			.box2{
				width: 300px;
			}
			.box3{
				width: 400px;
			}
			.box1,.box2,.box3{
				height: 100px;
				background-color: red;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
	</body>
</html>

上面的代码中，我们看到.box1,.box2,.box3{}这段就是多元素选择器的使用。