术语说明。“结构关系选择器”对应w3c术语“complex selector复杂选择器”，对应MDN翻译“关系选择器”。本教程避开“复杂选择器”这一术语，日常表达“复杂的选择器”时使用“嵌套”相关表达，例如“嵌套选择器”或“复杂嵌套选择器”。结构关系选择器通常也称为关系选择器。
结构关系选择器主要包括4种：子元素选择器、后代选择器、相邻兄弟选择器、兄弟选择器。
4.6.1 为什么需要结构关系选择器请先回顾“3.1.2 元素级别关系”。
一个页面可能包含几百个元素，就像一个学校有几百名同学。选择元素（同学）的逻辑比较复杂，使用简单选择器与复合选择器无法表达，例如“九班的男同学”。先通过选择器A找到“九班”，再通过选择器B找性别为男的同学，两个选择器需要组合；组合关系是“内部”，“内部”的逻辑即两个元素的结构关系是父子关系（或祖先-后代）。类似“内部”这种涉及到多个选择器之间的元素结构层级关系，需要使用结构关系选择器。
示例代码。下列选择器讲解以此代码为基础完成需求。
第1段 小步教程 xiaobuteach.com class1
第2段 class2
第3段
第11段 class1
第12段
第13段 class2
第14段
div1的子元素：第1~3段、div2。div2的子元素：第11~14段。
4.6.2 基本语法结构关系选择器是复合选择器compound selector的一种组合：多个复合选择器通过结构关系符隔开，表示选择元素需要满足相应元素结构层级关系。
A 结构关系符 BA、B、C等表示是复合选择器的任何一种形式，当然也包括简单选择器。结构关系符包括：空格、大于号、加号、波浪号。
4.6.3 子元素选择器子元素选择器定义
A>B{/*样式定义*/}两个选择器之间用大于号分开。当一个元素匹配选择器B，且父元素匹配选择器A，则此元素匹配此选择器。大于号前后加空格不影响含义。
需求场景：为类div1的儿子p元素增加相同样式。选择结果：第1~3段；div1的孙子p即第11~14段不要选择。
分析：父元素使用类选择器.div1，子元素使用标签选择器p，最终选择器代码如下。
.div1 > p{ border: 1px solid #999; color: #0aaa76; }试一试。将A、B换成其它简单选择器。
4.6.4 后代选择器后代选择器定义
A B{/*样式定义*/}选择器之间用空格分开，此处的空格不能删除。当一个元素匹配选择器B，且任何一个祖先元素匹配选择器A，则此元素匹配此选择器。
需求场景：为div1的儿子p元素、孙子p元素等所有后代p元素增加相同样式。选择结果：第1~3，11~14段。
分析：祖先元素符合类选择器.div1，后代元素符合标签选择器p，代码如下。
.div1 p{ border: 1px solid #999; color: #0aaa76; }试一试。将A、B换成其它简单选择器。
4.6.5 相邻兄弟选择器相邻兄弟。比如四个兄弟，它们四个的关系都是“兄弟”，老大与老二、老二与老三、老三与老四，这种关系称为相邻兄弟，老大与老三不是相邻兄弟。相邻兄弟选择器定义如下。
A+B{/*样式定义*/}选择器用加号隔开。A、B为相邻兄弟元素。加号前后有无空格不影响含义。
需求场景：选择class2，并且它的“相邻兄”是class1，也就是它平级的前面元素是class1。选择结果：第2段。
.class1 + .class2{ border: 1px solid #999; color: #0aaa76; } 4.6.6 兄弟选择器兄弟选择器定义
A~B{/*样式定义*/}选择器之间用波浪号隔开。A、B为兄弟元素。波浪号前后加空格不影响含义。
需求场景：选择class2，并且它的“兄弟”是class1，即只要平级元素是class1，无论前后。选择结果：第2、13段。
.class1 ~ .class2{ border: 1px solid #999; color: #0aaa76; } 4.6.7 结构关系嵌套结构关系选择器能够进一步嵌套。例如：A与B组合成X，C与D组合成Y，X与Y进一步组合得到结构关系选择器Z。
形式示例
A B > CA B > C + D需求场景示例。（1）首先找标签是div且类名是div1的元素，（2）找上一步元素的后代元素的类名是div2的元素，（3）找上一步元素的子元素是标签p且类名是class1的元素，（4）找上一步元素的兄弟元素里类名是class2的元素。
div.div1 .div2 > p.class1 ~ .class2 { border: 1px solid #999; color: #0aaa76; }最终结果选中“第13段”。