2.2 关系选择器
把两个基本选择器组合在一起，就形成了一个复杂的关系选择器，通过关系选择器可以精确匹配页面元素。
2.2.1 包含选择器
视频讲解
包含选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器，如图2.4所示。
图2.4 包含选择器
【示例】本示例演示了如何使用包含选择器为不同层次下的标签定义样式。
启动Dreamweaver，新建一个网页，在<body>标签内输入如下结构。
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后定义样式，希望实现如下设计目标。
☑ 定义<div id="header">包含框内的段落文本字体大小为14像素。
☑ 定义<div id="main">包含框内的段落文本字体大小为12像素。
这时可以利用包含选择器来快速定义它们的样式，代码如下。
#header p { font-size:14px;}
#main p {font-size:12px;}
2.2.2 子选择器
视频讲解
子选择器使用尖角号（>）表示，子选择器是指定父元素所包含的子元素，如图2.5所示。
图2.5 子选择器
【示例】本示例演示了如何使用子选择器为不同结构中的标签定义样式。
启动Dreamweaver，新建一个网页，在<body>标签内输入如下结构。
在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后定义所有span元素的字体大小为12像素，再利用子选择器来定义所有div元素包含的子元素span的样式为24像素，代码如下。
在浏览器中预览，显示效果如图2.6所示。
图2.6 子选择器应用效果
从图2.6可以看到，包含在div元素内的子元素span被定义了字体大小为24像素。通过这种方式可以准确定义某个或一组子元素的样式，而不再为它们定义ID属性或者Class属性。
2.2.3 相邻选择器
视频讲解
相邻选择器通过加号（+）分隔符进行定义。其基本结构是第1个选择器指定前面相邻元素，后面的选择器指定后面相邻元素，如图2.7所示。前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为“兄”后为“弟”，否则样式无法应用。
图2.7 相邻选择器结构
【示例】在本示例中，通过4种情况测试相邻选择符的应用范围，代码如下。
在浏览器中预览，页面效果如图2.8所示。
图2.8 相邻选择器
在上面示例中，将相邻选择器分成4种情况进行分析。
第1种：正常情况下，<p>标签和<h3>标签是兄弟元素；
第2种：添加一个<div>标签，将<p>标签和<h3>标签与第1种情况进行间隔，测试在有元素间隔时，样式是否有效；
第3种：<h3>标签为兄元素、<p>标签为弟元素，测试是否受影响；
第4种：为<p>标签和<h3>标签添加一个父层，查看是否受影响；
通过浏览器预览发现：第1种情况、第2种情况、第4种情况均有效，第3种情况无效。相邻选择器编写CSS样式：第1个元素为兄、第2个元素为弟，则HTML代码中兄和弟的关系不能调换，否则样式无效。再者，无论有多少父层，只要它们是直接兄弟关系，则样式有效，这一点与子选择器是有区别的。
2.2.4 兄弟选择器
视频讲解
CSS3增加了一种新的选择器组合形式——兄弟选择器。它通过波浪（～）分隔符进行定义。其基本结构是第1个选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素，如图2.9所示。前后选择符的关系是兄弟关系，即在HTML结构中两个标签前为“兄”后为“弟”，否则样式无法应用。
图2.9 兄弟选择器结构
兄弟选择器能够选择前置元素后同级的所有匹配元素，而相邻选择器只能选择前置元素后相邻的一个匹配元素。
【示例】以上节示例为基础，修改其中的p+h3 { background-color: #0099FF; }样式为p ～ h3{ background-color: #0099FF; }，具体样式代码如下。
在浏览器中预览，则页面效果如图2.10所示。可以看到在<div class="header">包含框中，位于<p>标签后的所有<h3>标签都被选中，设置背景色为蓝色。
图2.10 兄弟选择器
2.2.5 分组选择器
视频讲解
分组选择器通过逗号（,）分隔符进行定义。其基本结构是第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后把前后选择器匹配的元素都选取，如图2.11所示。
通过分组选择器可以实现集体声明，将样式表中一致的CSS样式放在一起，接着将这些选择器用逗号链接，以减少代码的书写量。
图2.11 分组选择器
【示例】在本示例中，将上面学过的复合选择器通过分组选择器集中声明，代码如下。
在浏览器中预览，页面效果如图2.12所示。
图2.12 分组选择器
在上面示例中，将<h1>～<h6>标签设置背景色为#99CC33，清除默认边距，通过下边距区分标题标签的空间。h1+h2,h2+h3,h4+h5代表3种兄弟元素均设置字体颜色为#0099FF；body>h6,h1>span,h4>span代表<body>标签的子元素<h6>、<h1>标签的子元素<span>、<h4>标签的子元素<span>这3种情况下的字体大小为20像素；h2 span,h3 span代表<h2>标签内的<span>、<h3>标签内的<span>（子孙辈皆可）左右边距为20像素；h5 span[class],h6 span[class]代表<h5>标签中的<span>标签含有Class属性、<h6>标签中的<span>标签含有class属性，背景色为#CC0033。