共计 1284 个字符，预计需要花费 4 分钟才能阅读完成。
如果页面构造很简单，给每个元素设置类名会是很‘头疼’的事件。咱们来举个例子。
通过布局和款式，实现这样的页面成果。
在 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。
回到浏览器，咱们要的成果实现了！
最初，给大家总结一下本节课解说的选择器，大家对着表格练习并消化他们。
两个组合选择器，后辈选择器和子选择器咱们就学完了，大家能够尝试变换和优化各种选择器的定义方法。
文章配套视频链接：https://www.bilibili.com/vide…
