当将多个基本组合器组合在一起，即组合选择器，组合选择器可以精确地匹配页面元素。
#
CSS提供了多个组合基本选择器的方式：包含选择器、子选择器、相邻选择器、兄弟选择器、分组选择器。
1.包含选择器
包含选择器通过空格标识符来标识，前一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器。
如:div span{font-size: 18px;}，div为包含选择符名，span为选择符，前者为包含选择符标识符，后者为被包含选择符名。后面整体则为一个声明。
例1：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>包含选择器</title>
<style type="text/css">
#header p {font-size: 14px;}
#main p {font-size: 12px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<P>头部区域第一段文字</P>
<p>头部区域第二段文字</p>
<p>头部区域第三段文字</p>
</div>
<div id="main">
<p>主体区域第一段文字</p>
<p>主体区域第二段文字</p>
<p>主体区域第三段文字</p>
</div>
</div>
</body>
</html>
|
效果预览图：
例一中的style内容也可以使用子选择器来定义它们的样式。
1
2
3
4
| <style type:"text/css">
#header > p {font-size: 14px;}
#main > p {font-size: 12px;}
</style>
|
效果相同。
通常当页面结构比较复杂，所有的包含元素不仅仅是子元素，这时就只能使用包含选择器了。如将例1代码进行更改：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>包含选择器</title>
<style type="text/css">
#header p {font-size: 14px;}
#main p {font-size: 12px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h2>
<P>头部区域第一段文字</P>
</h2>
<p>头部区域第二段文字</p>
<p>头部区域第三段文字</p>
</div>
<div id="main">
<p>主体区域第一段文字</p>
<p>主体区域第二段文字</p>
</div>
<p>主体区域第三段文字</p>
</div>
</body>
</html>
|
2.子选择器
子选择器是指定父元素所包含的子元素，子选择器使用尖括号>来表示。
如div > span {font-size: 18px;}
div为父级选择符名，span为选择符，前者称为子选择符标识符，后者为子级选择符名。
例1：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
span {
font-size:12px;
}
div > span {
font-size:24px;
}
</style>
</head>
<body>
<h2>
<span>HTML文档树状结构</span>
</h2>
<div id="box">
<span class="font24px">哈哈哈哈哈哈嗝</span>
</div>
</body>
</html>
|
效果预览图：
3.相邻选择器
相邻选择器，通过+分隔符进行定义。基本结构为第一个选择器指定前面相邻元素，后面的选择器指定相邻元素。
如：h5 + h1 {background: #000}。h5，h1为两个选择符，前者为"兄"选择符名称，后者为"弟"选择符名称，二者通过+链接前后选择符，其关系为兄弟关系，在HTML结构中，两个标签前为兄后为弟，否则样式无法应用。
例1：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相邻选择符</title>
<style type="text/css">
h2, p, h3 {
margin: 0;
padding: 0;
height: 30px;
}
p+h3 {
background-color: #0099FF;
}
</style>
</head>
<body>
<div class="header">
<h2>情况一：</h2>
<p>子选择器控制p标签，能控制我吗？</p>
<h3>子选择器控制p标签</h3>
<h2>情况二：</h2>
<div>隔开段落和h3标签</div>
<P>子选择器控制p标签，能控制我吗？</P>
<h3>相邻选择器</h3>
<h2>情况三：</h2>
<h3>相邻选择器</h3>
<p>子选择器控制p标签，能控制我吗？</p>
<div>
<h2>情况四：</h2>
<P>子选择器控制p标签，能控制我吗？</P>
<h3>相邻选择器</h3>
</div>
</div>
</body>
</html>
|
上例中共有四种情况： 1. 正常情况下p和h3是兄弟元素。 2.
添加一个div标签将p和h3标签进行第一种情况的隔离，测试在有元素间隔的时候，样式是否有效。
3. h3标签为兄弟元素，p标签为弟元素，测试是否受影响。 4.
为p标签和h3标签添加一个父层，查看是否受影响。
结果图：
分析：从结果可以看出除了第二种情况回事样式失效，其余都可以，也就是说：
用相邻选择器编写CSS样式时，第一个元素为兄，第二个元素为弟，则HTML代码中兄弟关系不能调换，否则样式无效；二，无论有多少父层，只要他们是直接兄弟关系，样式仍然生效。这与子选择器是有区别的（子选择器定义时不同父层是不一样的)。
兄弟选择器
该选择器是CSS3新增加的选择器组合形式，通过~进行定义。
其基本结构是第一个选择器指定同级前置元素，后面的选择器指定其后同级所有通配元素。
如：h5~h1 {background: #0099FF}
前者为"兄"选择符名称，后者为"弟"选择符名称，二者通过~链接。
例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相邻选择符</title>
<style type="text/css">
h2, p, h3 {
margin: 0;
padding: 0;
height: 30px;
}
p ~ h3 {
background-color: #0099FF;
}
</style>
</head>
<body>
<div class="header">
<h2>情况一：</h2>
<p>子选择器控制p标签，能控制我吗？</p>
<h3>子选择器控制p标签</h3>
<h2>情况二：</h2>
<div>隔开段落和h3标签</div>
<P>子选择器控制p标签，能控制我吗？</P>
<h3>相邻选择器</h3>
<h2>情况三：</h2>
<h3>相邻选择器</h3>
<p>子选择器控制p标签，能控制我吗？</p>
<div>
<h2>情况四：</h2>
<P>子选择器控制p标签，能控制我吗？</P>
<h3>相邻选择器</h3>
</div>
</div>
</body>
</html>
|
效果预览图：
可以看出在
