2.4 关系选择器
当把两个简单的选择器组合在一起，就形成了一个复杂的关系选择器，通过关系选择器可以精确匹配HTML结构中特定范围的元素。
2.4.1 包含选择器
包含选择器通过空格连接两个简单的选择器，前面选择器表示包含的元素，后面选择器表示被包含的元素。
优点：可以缩小匹配范围。- 缺点：匹配范围相对较大，影响的层级不受限制。
【示例】启动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.4.2 子选择器
子选择器使用尖角号（>）连接两个简单的选择器，前面选择器表示包含的父元素，后面选择器表示被包含的子元素。
- 优点：相对包含选择器，匹配的范围更小，从层级结构上看，匹配目标更明确。
- 缺点：相对于包含选择器，匹配范围有限，需要熟悉文档结构。
【示例】新建网页，在<body>标签内输入如下代码。
<h2><span> 虞美人·春花秋月何时了 </span></h2>
<div><span> 春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。雕栏玉砌应犹在，只是朱
颜改。问君能有几多愁？恰似一江春水向东流。 </span></div>
在<head>标签内添加<style type="text/css">标签，在内部样式表中定义所有span元素的字体大小为18像素，再用子选择器定义h2元素包含的span子元素的字体大小为28像素。
span { font-size: 18px; }
h2 > span { font-size: 28px; }
在浏览器中预览，显示效果如图2.5所示。
图2.5 子选择器应用
2.4.3 相邻选择器
相邻选择器使用加号（+）连接两个简单的选择器，前面选择器指定相邻的前面一个元素，后面选择器指定相邻的后面一个元素。
- 优点：在结构中能够快速、准确地找到同级、相邻元素。
- 缺点：使用前需要熟悉文档结构。
【示例】下面的示例通过相邻选择器快速匹配出标题下面相邻的p元素，并设计其包含的文本居中显示，效果如图2.6所示。
图2.6 相邻选择器的应用
如果不使用相邻选择器，用户需要使用类选择器来设计，这样就相对麻烦很多。
2.4.4 兄弟选择器
兄弟选择器使用波浪符号（~）连接两个简单的选择器，前面选择器指定同级的前置元素，后面选择器指定其后同级所有匹配的元素。
- 优点：在结构中能够快速、准确地找到同级靠后的元素。
- 缺点：使用前需要熟悉文档结构，匹配精度没有相邻选择器具体。
【示例】以上节示例为基础，添加如下样式，定义标题后面所有段落文本的字体大小为14像素，字体颜色为红色。
h2 ~ p { font-size: 14px; color:red; }
在浏览器中预览，页面效果如图2.7所示。可以看到兄弟选择器匹配的范围包含了相邻选择器匹配的元素。
图2.7 兄弟选择器的应用
2.4.5 分组选择器
分组选择器使用逗号（,）连接两个简单的选择器，前面选择器匹配的元素与后面选择器匹配的元素混合在一起作为分组选择器的结果集。
- 优点：可以合并相同样式，减少代码冗余。
- 缺点：不方便个性管理和编辑。
【示例】下面的示例使用分组将所有标题元素统一样式。
