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>元素。
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>。
div > p {
background-color: yellow;
}
返回代码，定义子选择器 div 大于 p，(div > p) 这样，只会找到第一个段落。因为后边的三个段落不是 div 的第一层子元素，所以不会包含他们。声明样式 color red。
回到浏览器，我们要的效果实现了!
最后，给大家总结一下本节课讲解的选择器，大家对着表格练习并消化他们。
两个组合选择器，后代选择器和子选择器我们就学完了，大家可以尝试变换和优化各种选择器的定义方法，把你认为满意的写法发送到留言区或者社群里，分享给其他的小伙伴吧。大家加油!
