如果页面结构很复杂，给每个元素设置类名会是很‘头疼’的事情。我们来举个例子。

　　通过布局和样式，实现这样的页面效果。

　　在 004 目录下，创建一个 css-combinators.html 文件，构建基本代码。在 body 里添加一个div 元素，在 div 里添加一个 h1 元素，一个 p 元素，一个 h3 元素。

　　编写 emmet 命令：ol 大于号 小括号 li 大于号 p 乘以 3，补全代码。 ol>(li>p)*3

　　给各个元素填入相应的文本。

　　在浏览器里预览页面，基本结构制作完成了。

　　开始添加样式：在 head 元素里添加 style 元素，定义元素选择器 h1，声明样式 text-align center。定义类选择器 .color，声明样式 color blue。

　　给 h3 和div里面的三个 p 元素添加 class 属性，值都设置为 color。

　　再看一下效果，样式都添加好了。

　　仔细观察，给每个元素都添加了同一个样式类 color，显得很啰嗦。可不可以简洁一些呢?这就要使用组合选择器了。

　　通过一些特殊符号将多个简单选择器连接起来，就构成了组合选择器。在 CSS 中，组合选择器有四种：

　　第一种，后代选择器，通过空格连接。

　　第二种，子选择器，通过大于号(>)连接。

　　第三种，相邻的兄弟选择器，通过加号(+)连接。

　　第四种，一般兄弟选择器，通过波浪线(~)连接。

　　后两个我们在学习CSS3时再详细介绍，本节课我们重点学习前两个。

　　后代选择器匹配作为指定元素后代的所有元素。这个例子选择了<div>元素内的所有<p>元素。

上一篇

SVG绘制路径

下一篇

GitGitee基本使用