
2.2.3 CSS 3常用选择器
选择器是CSS 3的一个重要内容,是一种集中设置页面元素样式的方式。使用选择器可以大幅度提高网页设计效率,便于网页的调试和修改。
1.类型选择器
“类型选择器”也称为“标记选择器”或“标签选择器”,它是以网页中现有标记为名称的选择器,用于统一设置某种标记的样式。例如,下列代码中table、tr和td为类型选择器,用于设置网页中所有表格(table)、表格行(tr)和单元格(td)的样式。代码运行结果如图2-7所示。

图2-7 代码运行结果


2.ID选择器和类选择器
为了使相同的网页元素具有不同的外观设置,可以通过指定元素ID名称并以该ID值为选择器设置样式。ID选择器书写时必须以“#”开头。
类选择器通过类名称指定一组样式设置,网页中的元素通过引用该类来应用这些样式设置。类选择器书写时必须以“.”开头。
例如,下列代码通过ID选择器和类选择器对3个图片元素进行样式设置,运行结果如图2-8所示。

图2-8 ID选择器和类选择器示例

类选择器img_r中的max-width和max-height是针对图片元素所在容器的div而言的,也就是说,图片自动缩放最大占满div的范围,而div的大小及显示位置由类选择器imgdiv决定(层采用绝对定位方式;距页面顶端20px;距页面左端520px;层大小为宽100px,高71px)。
3.包含选择器和组群选择器
包含选择器用于设置某元素下面子元素的样式。例如,下列代码使用包含选择器设置<div>标记下所有<a>子标记的字号为36px,字体为黑体。

如果希望div标记下的所有子标记都采用上述设置,可将代码改写成如下形式。

群组选择器可以对若干个不同元素进行统一的样式设置。例如,下列代码使用群组选择器使body、ul、li、a和p这几个元素具有相同的样式(内外边距均为0)。

4.属性选择器
属性选择器可以根据元素是否具有某个属性或属性是否具有某个特定值来决定是否对其应用指定的样式。CSS 3中属性选择器常用的格式有以下几种。

【演练2-1】属性选择器使用示例。
启动Visual Studio,选择“文件”→“新建”→“网站”命令,以“ex2-1”为名称新建一个ASP.NET空网站。在解决方案资源管理器中右击网站名称,在弹出的快捷菜单中选择“添加”→“HTML页”命令,以“Default”为文件名向网站中添加一个静态网页文件。

图2-9 代码运行结果
按如下所示编辑HTML代码,运行后得到如图2-9所示的结果。


说明:本例需要使用两个表示Word和PowerPoint文档的图标文件,可从Internet中下载并调整为20×20px大小,复制到网站文件夹中。超链接的目标文件可以是任意的Word文档和PowerPoint演示文稿(文件名必须是Word.docx和PPT.pptx),同样需要复制到网站文件夹中。
5.伪类选择器
“伪类选择器”也称为“虚类选择器”,它是在前面介绍的各种选择器的基础上,进一步添加“伪类”来控制特定标记样式设置的方法,其语法格式如下。

伪类选择器中最常用的是关于超链接的样式设置,举例如下。
