009_CSS分组选择器

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. 效果图

009_CSS分组选择器相关推荐

教你玩转CSS 分组选择器和嵌套选择器
目录分组选择器嵌套选择器分组选择器在样式表中有很多具有相同样式的元素. h1 {color:green;}h2 {color:green;}p {color:green;} 为了尽量减少代码, ...
css 选项进行分组,CSS 通用和分组选择器(十)
一.通用选择器通用选择器可能是所有选择器中最强大的,却使用最少的.通用选择器的作用就像是通配符,它匹配所有可用元素.通用选择器由一个星号表示.通用选择器一般用来对象页面上所有元素应用样式例如:可使 ...
CSS 分组和嵌套选择器
分组选择器在样式表中有很多具有相同样式的元素. h1 {color:green; } h2 {color:green; } p {color:green; } 为了尽量减少代码,你可以使用分组选择器 ...
初试CSS(二)：选择器
选择器选择器有很多,而且各个选择器之间可以混合使用,很方便.选择器后面加的{}叫声明块,在{}中放很多的css属性.按照平常使用的习惯,选择器可以分为2类--基本选择器.其他选择器. 基本选择器包括 ...
CSS选择器和参考手册
CSS的基本语法选择器:通过选择器可以选中页面中的指定元素.声明块:通过声明块来指定元素设置样式.声明块由一个一个的声明组成声明是由一个名值对结构:一个样式名对应一个样式值,名和值之间以:连接,以; ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
CSS概念，引入，选择器
概念层叠样式表,定义如何显示HTML元素. 使用方式行内样式不推荐使用此方式结构和样式的杂糅会影响后期的维护 <p style="color: red"> ...
学习《CSS选择器Level-4》不完全版
1 概述 1.1 前言选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...
学习总结：CSS(一)定义方式、选择器、选择器权重
一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...

009_CSS分组选择器

009_CSS分组选择器相关推荐

最新文章

热门文章