2.3 关系选择器_CSS3网页设计从入门到精通（微课精编版）-QQ阅读男生玄幻网

2.3 关系选择器

当把两个简单的选择器组合在一起，就形成了一个复杂的关系选择器，通过关系选择器可以精确匹配HTML结构中特定范围的元素。

包含选择器通过空格连接两个简单的选择器，前面选择器表示包含的对象，后面选择器表示被包含的对象。

优点：可以缩小匹配范围。

缺点：匹配范围相对较大，影响的层级不受限制。

【示例】启动Dreamweaver，新建一个网页，在<body>标签内输入如下结构：

在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。然后定义样式，希望实现如下设计目标。

定义<div id="header">包含框内的段落文本字体大小为14px。

定义<div id="main">包含框内的段落文本字体大小为12px。

这时可以利用包含选择器来快速定义样式，代码如下：

子选择器使用尖角号（>）连接两个简单的选择器，前面选择器表示包含的父对象，后面选择器表示被包含的子对象。

优点：相对于包含选择器，匹配的范围更小，从层级结构上看，匹配目标更明确。

缺点：相对于包含选择器，匹配范围有限，需要熟悉文档结构。

【示例】新建网页，在<body>标签内输入如下结构：

在<head>标签内添加<style type="text/css">标签，在内部样式表中定义所有span元素的字体大小为18px，再用子选择器定义h2元素包含的span子元素的字体大小为28px。

在浏览器中预览，显示效果如图2.3所示。

图2.3 子选择器应用

相邻选择器使用加号（+）连接两个简单的选择器，前面选择器指定相邻的前面一个元素，后面选择器指定相邻的后面一个元素。

优点：在结构中能够快速、准确地找到同级、相邻元素。

缺点：使用前需要熟悉文档结构。

【示例】下面示例通过相邻选择器快速匹配出标题下面相邻的p元素，并设计其包含的文本居中显示，效果如图2.4所示。

图2.4 相邻选择器的应用

如果不使用相邻选择器，需要使用类选择器来设计，这样就相对麻烦很多。

兄弟选择器使用波浪符号（～）连接两个简单的选择器，前面选择器指定同级的前置元素，后面选择器指定其后同级所有匹配的元素。

优点：在结构中能够快速、准确地找到同级靠后的元素。

缺点：使用前需要熟悉文档结构，匹配精度没有相邻选择器具体。

【示例】以2.3.3节示例为基础，添加如下样式，定义标题后面所有段落文本的字体大小为14px，字体颜色为红色。

    h2 ~ p {font-size: 14px; color:red;}

在浏览器中预览，页面效果如图2.5所示。可以看到兄弟选择器匹配的范围包含了相邻选择器匹配的元素。

图2.5 兄弟选择器的应用

分组选择器使用逗号（,）连接两个简单的选择器，前面选择器匹配的元素与后面选择器匹配的元素混合在一起作为分组选择器的结果集。

优点：可以合并相同样式，减少代码冗余。

缺点：不方便个性管理和编辑。

【示例】下面示例使用分组选择器将所有标题元素统一样式。