如果页面结构很复杂，给每个元素设置类名会很“头疼”。让我们举个例子。通过布局和样式，达到这样的页面效果。在004目录中，创建一个css-combinators.html文件来构建基本代码。在body中添加一个div元素，在div中添加一个h1元素，一个p元素，一个h3元素。写emmet命令：ol大于符号括号li大于符号p乘以3完成代码。ol>(li>p)*3为每个元素填写相应的文本。在浏览器中预览页面，基本结构就完成了。开始添加样式：在head元素中添加一个style元素，定义元素选择器h1，声明样式text-aligncenter。定义类选择器.color并声明样式颜色为蓝色。为h3和div内部的三个p元素添加class属性，并设置值为color。再看效果，样式都加好了。仔细观察，给每个元素都加上相同的样式类颜色，显得很冗长。你能更简洁一点吗？这是使用组合选择器的地方。组合选择器是将多个简单选择器通过一些特殊符号连接起来形成的。在CSS中，有四种选择器组合：第一种，后代选择器，由空格连接。第二个子选择器由大于号(>)连接。第三个相邻的兄弟选择器由加号(+)链接。第四种，通用兄弟选择器，由波浪号（~）连接。后两者我们在学习CSS3的时候会详细介绍。在本课中，我们将重点关注前两个。后代选择器匹配作为指定元素后代的所有元素。此示例选择
元素。divp{background-color:yellow;}返回代码，我们去掉了h3元素的class属性，这样h3标签中的内容就没有颜色了，现在我们使用后代选择器为h3文本添加颜色再次。定义一个元素选择器div,space，然后定义一个后代元素h3，(divh3)样式声明颜色依然是蓝色。去掉三个p元素的class属性，同样定义一个后代选择器，div空间p，(divp)声明样式颜色为蓝色。div中的h3元素和所有p元素都是蓝色的。但是我们只想给ol里面的p元素加上blue。修改第二个后代选择器更具体，将其更改为divspacelispacep。(divlip)再看看效果，完美解决了这个问题！如果我们要给第一段加颜色，刚才的实验我们知道不能用offspringselector。我们可以使用子选择器。与后代选择器相比，子选择器只能选择，作为一个元素的子元素，不能选择孙元素。此示例选择作为
元素。div>p{background-color:yellow;}返回码，定义子选择器div大于p，(div>p)这样只会找到第一段。因为接下来的三段不是div的一级子元素，所以不会被包含。声明样式颜色为红色。回到浏览器，我们想要的效果已经实现了！最后总结一下本课讲解的选择器，对照表格练习消化。我们已经学习完了两个组合选择器，后代选择器和子选择器。大家可以尝试改造优化各种选择器的定义方式。文章配套视频链接：https://www.bilibili.com/video...