码上未来IT培训老师直接接听

400-029-09** 400-029-0997 转 36015
查看完整号码
扫码拨号
微信扫码拨号

CSS复合选择器怎样使用？

作者：码上未来CodingFuture 来源：码上未来CodingFuture 2023年08月28日 更新

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

书写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 ·speclal color p.special color /*标签指定式选择器*/ </style> </head> (body> <p>普通段落文本（蓝色）</p> <p clasa="apecial“>指定了.special类的段落文本（红色）</p> <h3 class= "spectal" </body> </html> 上例中定义了<p>标签和“special”类的样式;此外，还单独定义了“pspecial”，用于控制特殊显示的样式。 (2)后代选择器 后代选择器用于选择元素或元素组的后代，其定义方法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的“后代”。 如果<p>标签内嵌套<strong>标签，就可以使用后代选择器对其中的<strong>标签进行控制，如下。 <! > < > < > < =" " > < > 后代选择器 </ > <style type-"text/css"> p strong color red /*后代选择器*/ strong color blue </ > </ > < > < > 段落文本 < > 嵌套在段落中，使用strong标签定义的文本（红色）。 </ ></ > < > 嵌套之外由strong标签定义的文本（蓝色）。 </ > </ > </ > 定义了两个<strong>标签，并将第*个<strong>标签嵌套在<p>标签中，然后分别设置<strong>标签和“p strong”的样式。运行效果如图所示。
通过图片可以看出后代选择器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 , , { color font-size 14 /*不同标签组成的并集选择器*/ h3 , , { text-decoration /*标签选择器、类选择器、id选择器组成的并集选择器*/ </style> </head> <body> <h2>二级标题文本。</h2> <h3>三级标题文本，加下画线，</h3> <p claas= "special" 1 <p>段落文本 2 <p id= "one" 3 </body> </html> 在例3-12中，使用由不同标签组成的并集选择器“h2.h3.p”控制所有标题和段落的字号和颜色。然后，使用由标签选择器、类选择器、id选择器组成的并集选择器“h3.special,fhfone”定义某些文本的下画线效果。
添加微信咨询
夏老师 @大连码上未来IT培训

资深职业咨询规划师

微信号：155******12

立即咨询

“大连码上未来IT培训”是码上未来科技(大连)有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：5.0师资：5.0服务：5.0效果：5.0

公示信息

店铺名称：大连码上未来IT培训

单位名称：码上未来科技(大连)有限公司

账号名称：mswl（158******92）

所属城市：辽宁大连

入驻时长：6年

在线客服：在线聊

相关课程

微信咨询

返回顶部