009_CSS分组选择器

最新推荐文章于 2021-10-28 19:09:44 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-10-28 19:09:44 发布

阅读量198

点赞数

分类专栏： css学习

本文链接：https://blog.csdn.net/aihiao/article/details/109063075

版权

CSS分组选择器样式定义多元素样式复杂样式

关键词由CSDN通过智能技术生成

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. 选择器的分组

1.1. 你可以对选择器进行分组, 这样, 被分组的选择器就可以分享相同的声明。将多个选择器放在规则左边, 然后用逗号分隔, 就定义了一个分组。逗号告诉浏览器, 规则中包含多个不同的选择器。

1.2. 可以将任意多个选择器分组在一起, 对此没有任何限制。

1.3. 例如, 如果您想把很多元素显示为灰色，可以使用类似如下的规则:

body, h2, p, table, th, td, pre, strong, em {
    color: gray;
}

2. 结合选择器和声明的分组

2.1. 我们可以在一个规则中结合选择器分组和声明分组, 就可以使用很少的语句定义相对复杂的样式。

2.2. 下面的规则为所有标题指定了一种复杂的样式:

h1, h2, h3, h4, h5, h6 {
  color: gray;
  background: white;
  padding: 30px;
  border: 1px solid black;
  font-family: Verdana;
}

3. 例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS分组选择器</title>
		<meta charset="utf-8" />

		<style type="text/css">
			h1, h2, h3, h4, h5, h6 {
				color: gray;
				background: white;
				padding: 30px;
				border: 1px solid black;
				font-family: Verdana;
			}
		</style>
	</head>
	<body>
		<h1>This is heading 1</h1>
		<h2>This is heading 2</h2>
		<h3>This is heading 3</h3>
		<h4>This is heading 4</h4>
		<h5>This is heading 5</h5>
		<h6>This is heading 6</h6>
	</body>
</html>

3.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
009_CSS分组选择器

1. 选择器的分组1.1. 你可以对选择器进行分组, 这样, 被分组的选择器就可以分享相同的声明。将多个选择器放在规则左边, 然后用逗号分隔, 就定义了一个规则。逗号告诉浏览器, 规则中包含两个不同的选择器。1.2. 可以将任意多个选择器分组在一起, 对此没有任何限制。1.3. 例如, 如果您想把很多元素显示为灰色，可以使用类似如下的规则:body, h2, p, table, th, td, pre, strong, em {color:gray;}2. 结合选择器和声明的分组2
复制链接

扫一扫

专栏目录