零基础教你学前端——57，CSS组合选择器

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

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

在 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 {

background-color: yellow;

}

返回代码，我们去掉 h3 元素的 class 属性，这样h3标签里的内容就没有了颜色，现在我们用后代选择器重新给h3的文字加上颜色。定义一个元素选择器 div，空格，再定义一个后代元素 h3，(div h3) 样式声明仍然是 color blue。

去掉三个 p 元素的 class 属性，同样定义一个后代选择器， div 空格 p，（div p）声明样式 color blue。

h3元素和div里面所有的 p 元素都被添加了蓝色。但我们只想把ol里面的p元素添加上蓝色。

修改一下第二个后代选择器，让它更具体一些，将它变为 div 空格 li 空格 p。 (div li p)

再看一下效果，完美解决了这个问题！

假如我们要给第一个段落加个颜色，通过刚才的实验得知，不能使用后代选择器。我们可以使用子选择器。

子选择器与后代选择器相比，子选择器只能选择，作为某元素的子元素，不能选择到孙子辈的元素。这个例子选择了作为

元素的所有子元素

。

div > p {

background-color: yellow;

}

返回代码，定义子选择器 div 大于 p，(div > p) 这样，只会找到第一个段落。因为后边的三个段落不是 div 的第一层子元素，所以不会包含他们。声明样式 color red。

回到浏览器，我们要的效果实现了！

最后，给大家总结一下本节课讲解的选择器，大家对着表格练习并消化他们。

两个组合选择器，后代选择器和子选择器我们就学完了，大家可以尝试变换和优化各种选择器的定义方法。