教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

CSS复合选择器怎样使用?【案例演示】

更新时间:2023年04月07日09时41分 来源:传智教育 浏览次数:

书写CSS样式表时,可以使用CSS基础选择器选中HTML元素。但是在实际网站开发中,一个网页可能包含成千上万的HTML元素,如果仅使用CSS基础选择器是远远不够的。为此,CSS提供了儿种复合选择器,实现了更强、更方便的选择功能。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。CSS复合选择器包括标签指定式选择器、后代选择器和并集选择器,具体介绍如下。

(1)标签指定式选择器

标签指定式选择器又称为“交集选择器”,由两个选择器构成,一个为标签选择器,另一个为class选择器或id选择器,两个选择器之间不能有空格,例如,“h3.special”或“pone”。

下面通过一个案例对标签指定式选择器做具体演示。

<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>标签指定式选择器的应用</title>
<style type="text/css">
p{ color:blue;}
·speclal{color:green;}
p.special{color:red;}  /*标签指定式选择器*/
</style>
</head>
(body>
<p>普通段落文本(蓝色)</p>
<p clasa="apecial“>指定了.special类的段落文本(红色)</p>
<h3 class="spectal">指定了,special类的标题文本(绿色)</h3>
</body>
</html>

上例中定义了<p>标签和“special”类的样式;此外,还单独定义了“pspecial”,用于控制特殊显示的样式。

(2)后代选择器

后代选择器用于选择元素或元素组的后代,其定义方法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的“后代”。

如果<p>标签内嵌套<strong>标签,就可以使用后代选择器对其中的<strong>标签进行控制,如下。

<!doctype htnl>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type-"text/css">
p strong{color:red:}      /*后代选择器*/
strong{color:blue:}
</style>
</head>
<body>
<p>段落文本<strong>嵌套在段落中,使用strong标签定义的文本(红色)。</strong></p>
<strong>嵌套之外由strong标签定义的文本(蓝色)。</strong>
</body>
</html>

定义了两个<strong>标签,并将第一个<strong>标签嵌套在<p>标签中,然后分别设置<strong>标签和“p strong”的样式。运行效果如图所示。

1680776016211_后代选择器.png

通过图片可以看出后代选择器p strong定义的样式仅适用于嵌套在<p>标签中的<strong>标签,其他的<strong>标签不受影响。需要说明的是,后代选择器不局限于应用在两个元素中,如需要加入更多的元素,只需在元素之间加上空格即可。如果例3-l1中的标签中还嵌套了一个<em>标签,要想控制这个<em>标签,可以使用“pstrong em”选中该<em>标签。

(3)并集选择器

并集选择器的各个选择器通过英文逗号连接而成,任何形式的选择器(包括标签选择器、类选择器和i选择器),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,可以利用并集选择器为它们定义相同的CSS样式。

如果在页面中有2个标题和3个段落且它们的字号和颜色相同,同时其中一个标题和两个段落文本有下画线效果,这时就可以使用并集选择器定义CSS样式,如下例所示。

<!doctype html>
<html>
<head>
<meta charaet="utf-8">
<title>井集选择器</title>
<style type="text/css">
h2,h3,p{color:red; font-size:14px:}/*不同标签组成的并集选择器*/
h3,.special,#one{text-decoration:underline;} /*标签选择器、类选择器、id选择器组成的并集选择器*/
</style>
</head>
<body>
<h2>二级标题文本。</h2>
<h3>三级标题文本,加下画线,</h3>
<p claas="special">段落文本1,加下画线。</p>
<p>段落文本2,普通文本。</p>
<p id="one">段落文本3,加下画线。</p>
</body>
</html>

在例3-12中,使用由不同标签组成的并集选择器“h2.h3.p”控制所有标题和段落的字号和颜色。然后,使用由标签选择器、类选择器、id选择器组成的并集选择器“h3.special,fhfone”定义某些文本的下画线效果。

0 分享到:
和我们在线交谈!