《HTML5+CSS3网页制作教程》课件_第10章.pptx

模块10CSS选择器;

10.1CSS选择器概念

;

;

上述样式代码“div{color:red;}”中，“div”即为选择器，表示选择了页面中的div元素，div标签内的文本会显示为红色，这是由样式规则中的“color:red;”设定的。如果我们将样式代码中的选择器“div”更换为“p”，那么显示红色文字的就变成p标签内的文本了。大家可以在浏览器中运行本例并尝试修改代码观察结果的变化。

CSS选择器的类型有很多，包括标签选择器、id选择器、类选择器、属性选择器等。

;

10.2标签选择器;

标签选择器的语法格式如下：;

【例10-1】标签选择器的应用。

;

;

上述代码在浏览器中的预览效果如图10-1所示。

;

本例中，CSS选择器为“td”，表示选择了页面中所有由td标签定义的元素，所以在预览结果中，我们看到每个单元格都具有相同样式：高50像素、宽200像素、粗细1像素的实线黑色边框。

说明：有一种特殊的选择器类型，称为通配符选择器，它使用“*”表示，其作用是选择所有元素。例如下面的代码，使用通配符选择器清除所有HTML标签的默认边距。

;

10.3id选择器

;

【例10-2】id选择器的应用。

;

;

本例中，先用标签选择器“p”选择了所有的段落p元素，为它们设置了统一的字体大小样式，再使用id选择器“#p2”选择了id属性值为“p2”的元素，即为第二个段落p元素设置了红色字体。

;

10.4class选择器;

class选择器的语法格式如下：

说明：class名即class属性的值，在class名前面必须加上前缀符号“.”(英文点号)，否则该选择器无效。;

【例10-3】class选择器的应用。

;

上述代码在浏览器中的预览效果如图10-2所示。

;

本例中，CSS样式代码“.red{color:red;}”表示选中class属性值为“red”的所有元素，然后为这些元素设置了CSS属性“color:red;”。

body标签内部包含h1、div和p这些不同的元素，但可以为这些元素定义相同的class属性，这样就可以同时为这些元素设置相同的CSS样式了。从图10-2中可以看出，

只有“盒子1”所在的div标签没有定义class属性，所以它没有显示为红色。;

10.5属性选择器

;

【例10-4】属性选择器的应用。

;

上述代码在浏览器中的预览效果如图10-3所示。

;

本例中，选择器“[target]”表示选择使用了target属性的所有元素，并为这些元素设置了浅蓝色的背景。选择器“[target=_blank]”表示选择了target属性值为“_blank”的元素，并设置文本颜色为红色。从图10-3中我们可以看出，“学院简介”和“校园环境”这两个超链接元素被选择器选中并分别设置了样式。

属性选择器还可以结合一些符号来表示有条件的选择。CSS属性选择器语法格式及举例见表10-1

;

;

10.6组合选择器;

【例10-5】后代选择器的应用。;

;

上述代码在浏览器中的预览效果如图10-4所示。;

10.6.2?子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接(一级)子元素的元素。其语法格式如下：;

【例10-6】子元素选择器的应用。

;

上述代码在浏览器中的预览效果如图10-5所示。;

10.6.3?相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且两者有相同的父元素。“相邻”的意思是“紧随其后”。

相邻兄弟选择器的语法格式如下：;

【例10-7】相邻兄弟选择器的应用。;

10.6.4?后续兄弟选择器

后续兄弟选择器可选取指定元素之后的所有普通兄弟元素。其语法格式如下：;

【例10-8】后续兄弟选择器的应用。

;

10.6.5?交集选择器

交集选择器由标签选择器和class选择器或id选择器组合在一起使用，取两种选择器所选范围的交集。

交集选择器的语法格式如下：;

【例10-9】交集选择器的应用。

;

上述代码在浏览器中的预览效果如图10-6所示。;

10.6.6?分组选择器

当页面中有多个元素都设置了相同的样式，我们可以通过分组将这些元素的选择器写到一起，这样就可以得到更简洁的样式表。

分组选择器的语法格式如下：

;

【例10-10】分组选择器的应用。