f10@t's blog

CSS基础4.2--选择器之组合选择器

开发技术
字数统计: 2.8k阅读时长: 13 min
2018/08/05

当将多个基本组合器组合在一起，即组合选择器，组合选择器可以精确地匹配页面元素。 # 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 {                   /*span元素的默认样式*/
	font-size:12px;
}
div > span {            /*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
<!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;   /*初始化设置高度为30像素*/
}
p+h3 {
	background-color: #0099FF;        /*设置背景色*/
}
</style>
</head>

<body>
<div class="header">
    <h2>情况一：</h2>         <!--正常情况：P为兄(写前面),h3为弟(写后面)，与定义的相同-->
    <p>子选择器控制p标签，能控制我吗？</p>
    <h3>子选择器控制p标签</h3>
    <h2>情况二：</h2>              <!--用一个标签隔开段落-->
    <div>隔开段落和h3标签</div>
    <P>子选择器控制p标签，能控制我吗？</P>
    <h3>相邻选择器</h3>
    <h2>情况三：</h2>          <!--翻转兄弟关系，与定义的p兄h3弟相反-->             <h3>相邻选择器</h3>
    <p>子选择器控制p标签，能控制我吗？</p>
    <div>
        <h2>情况四：</h2>       <!--为二者添加一个父层div-->
        <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;   /*初始化设置高度为30像素*/
}
p ~ h3 {        /*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>
效果预览图： 可以看出在

包含框中，所有位于p标签后的所有h3标签都被选中，其背景色为蓝色。

5.分组选择器

分组选择器通过,来进行定义。

基本结构第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后将前后选择器匹配的元素都选择取出来。 如：h1,h2,h3,h4,h5 {font-size: 18px;} h1,h2,h3,h4,h5为前后应用相同的样式。 通过分组选择器可以实现集体声明，将样式表中一致的CSS样式放一起，然后通过逗号链接这些选择器，减少了代码的书写量。 例： 

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" />
<script type="text/javascript" src="IE8.js"></script> <!--保证IE浏览器的支持-->
<title>分组选择器</title>
<style type="text/css">
h1, h2, h3, h3, h4, h5, h6 {           /*分组选择器部分*/
	background: #99CC33;
	margin: 0;
	margin-bottom: 10px;
}
h1+h2, h2+h3, h4+h5 {
	color: #0099FF;              /*兄弟关系设置字体颜色*/
}
body>h6, h1>span, h4>span {
	font-size: 20px;   /*子选择器设置间距*/
}
h2 span, h3 span {
	padding: 0 20px;      /*span标签的左右间距*/
}
h5 span[class], h6 span[class] {background-color: #CC0033;  
/*为h5,h6中含有class属性的span标签设置背景色*/
}
</style>	 
</head>

<body>
<h1>h1元素<span>这里是span元素</span></h1>
<h2>h2元素<span>这里是span元素</span></h2>
<h3>h3元素<span>这里是span元素</span></h3>
<h4>h4元素<span>这里是span元素</span></h4>
<h5>h5元素<span class="S1">这里是span元素</span></h5>
<h6>h6元素<span class="S2">这里是span元素</span></h6>
</body>
</html>

效果预览图： 该例中声明了上面我们提到的一些复合选择器。

原文作者：f10@t

原文链接：https://lzwgiter.github.io/posts/7b6c38ce.html

发表日期：August 5th 2018, 6:33:11 pm

更新日期：August 25th 2021, 7:24:22 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 1.包含选择器
  2. 2. 2.子选择器
  3. 3. 3.相邻选择器
  4. 4. 兄弟选择器
  5. 5. 5.分组选择器
Total : 97
2024
2023
2022
2021
2020
2019
2018
Java 开发技术 区块链技术 渗透测试 漏洞分析 web安全 前端 Go语言 Go Web 论文阅读 CTF SQL注入 CSS 隐写术 python 云技术 DevOps 开发与运维 DevSecOps 网络编程 Kubernete 云安全 分布式技术 MatLab PHP Spring Quarkus docker NodeJS express 微服务技术 以太坊 密码学 智能合约 电子取证 pwn C编程 课程总结 日常
开发技术 区块链技术 漏洞分析 论文阅读 CTF 渗透测试 DevSecOps 云安全 MATLAB 密码学 电子取证 课程总结 杂谈