学科分类
目录
HTML5+CSS3

CSS复合选择器

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

1. 标签指定式选择器

标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标签选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如h3.special或p#one。

标签选择器p.special定义的样式仅仅适用于<p class="special">标签,而不会影响使用了special类的其他标签。

2.后代选择器

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

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

后代选择器p strong定义的样式仅仅适用于嵌套在<p>标签中的<strong>标签,其他的<strong>标签不受影响。而且不限于使用两个元素,如果需要加入更多的元素,只需在元素之间加上空格即可。如果例13-6中的<strong>标签中还嵌套有一个<em>标签,要想控制这个<em>标签,就可以使用p strong em选中它。

3. 并集选择器

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

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

使用并集选择器定义样式与对各个基础选择器单独定义的样式效果完全相同,而且这种方式书写的CSS代码更简洁、高效。

点击此处
隐藏目录