6.4 CSS3选择器_精通HTML5+CSS3+JavaScript网页设计（视频教学版）（第2版）-QQ阅读男生玄幻网

书名：精通HTML5+CSS3+JavaScript网页设计（视频教学版）（第2版）
作者名：王英英
本章字数：4353字
更新时间：2021-03-24 01:08:52

6.4 CSS3选择器

选择器（selector）也被称为选择符。所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。选择器不只是HMTL文档中的元素标记，还可以是类（Class，这不同于面向对象程序设计语言中的类）、ID（元素的唯一特殊名称，便于在脚本中使用）或是元素的某种状态（如a:link）。根据CSS选择器用途可以把选择器分为标记选择器、类选择器、全局选择器、ID选择器和伪类选择器等。

6.4.1 标记选择器

HTML文档是由多个不同标记组成的，而CSS选择器就是声明那些标记样式风格的。例如，p选择器，就是用于声明页面中所有<p>标记的样式风格；同样，也可以通过h1选择器来声明页面中所有<h1>标记的样式风格。

标记选择器最基本的形式如下所示。

     tagName{property:value}

技巧提示

其中，tagName表示标记名称，例如p、h1等HTML标记；property表示CSS3属性；value表示CSS3属性值。

通过声明一个具体标记，可以对文档里这个标记出现的每一个地方应用样式定义。这种做法通常用在设置那些在整个网站都会出现的基本样式。例如，下面的定义就用于为一个网站设置默认字体。

这个选择器声明了一系列的标记，所有这些标记出现的地方都将以定义的样式（字体、字号和颜色）显示。理论上仅声明〈body〉标记就已经足够（因为所有其他标记会出现在〈body〉标记内部，并且将因此继承它的属性），但是许多浏览器不能恰当地将这些样式属性带入表格和其他标记里。因此，为了避免这种情况，这里声明了其他标记。

【例6.10】（实例文件：ch06\6.10.html）

     <!DOCTYPE html>
     <html>
     <head>
     <title>标记选择器</title>
     <style>
     p{color:blue;       /*设置字体的颜色为蓝色*/
     font-size:20px;  /*设置字体的大小*/
     }
     </style>
     </head>
     <body>
     <p>此处使用标记选择器控制段落样式</p>
     </body>
     </html>

在IE 11.0中的浏览效果如图6-16所示，其中段落字体以蓝色显示，大小为20px。

图6-16 标记选择器显示

如果在后期维护中需要调整段落颜色，只需要修改color属性值即可。

技巧提示

CSS3标准对于所有属性和值都有相对严格的要求，如果声明的属性在CSS3规范中没有或者某个属性值不符合属性要求，都不能使CSS语句生效。

6.4.2 类选择器

使用标记选择器可以控制该页面中所有相关标记的显示样式，如果需要对其中一系列标记重新设定，此时仅使用标记选择器是远远不够的，还需要使用类选择器。

类选择器用来为一系列标记定义相同的呈现方式，常用语法格式如下所示。

     .classValue{property:value}

classValue是选择器的名称，具体名称由CSS制定者自己命名。如果一个标记具有class属性且class属性值为classValue，那么该标记的呈现样式由该选择器指定。在定义类选择符时，需要在classValue前面加一个句点“.”，示例如下所示。

上面定义了两个类选择器，分别为rd和se。类的名称可以是任意英文字符串或以英文开头与数字的组合，一般情况下采用其功能或效果的缩写。

在<p>标记的class属性中使用类选择符，示例如下所示。

     <p class="rd">class属性是被用来引用类选择器的属性</p>

类选择器只能被应用于指定的标记中（例如<p>标记），可以在不同标记中使用相同的呈现方式，例如：

     <p class="rd">段落样式</p>
     <h3 class="rd">标题样式</h3>

【例6.11】（实例文件：ch06\6.11.html）

在IE 11.0中的浏览效果如图6-17所示。其中，第一个段落字体以蓝色显示，大小为20px；第二个段落字体以红色显示，大小为22px；标题字体同样以红色显示，大小为22px。

图6-17 类选择器显示

6.4.3 ID选择器

ID选择器和类选择器类似，都是针对特定属性的属性值进行匹配。ID选择器定义的是某一个特定的HTML标记，一个网页文件中只能有一个标记使用某一ID的属性值。

定义ID选择器的基本语法格式，如下所示。

     #idValue{property:value}

在上述基本语法格式中，idValue是选择器名称，可以由CSS定义者自己命名。如果某标记具有id属性，并且该属性值为idValue，那么该标记的呈现样式由该ID选择器指定。在正常情况下id属性值在文档中具有唯一性。在定义ID选择器时，需要在idValue前面加一个“#”符号，示例如下所示。

与类选择器相比，使用ID选择器定义样式是有一定局限性的，类选择器与ID选择器主要有以下两种区别：

（1）类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。

（2）ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器发生冲突时，优先使用ID选择器定义的样式。

【例6.12】（实例文件：ch06\6.12.html）

在IE 11.0中的浏览效果如图6-18所示。其中，第一个段落字体以红色显示，大小为22px；第二个段落字体以蓝色显示，字形加粗；标题字体同样以红色显示，大小为22px。

图6-18 ID选择器显示

从上面的代码可以看出，标题h3和第一个段落都使用了名称textstyle的ID选择器并都显示了CSS方案。这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的ID不只是CSS可以调用，JavaScript等脚本语言同样也可以调用。如果一个HTML中有两个相同id的标记，那么将会导致JavaScript在查找id时出错。

技巧提示

JavaScript等脚本语言也能调用HTML中设置的id，因此ID选择器一直被广泛使用。网页设计者在编写HTML代码时应该养成一个习惯，一个id只赋予一个HTML标记。

6.4.4 全局选择器

如果想要一个页面中的所有HTML标记使用同一种样式，可以使用全局选择器。全局选择器，顾名思义就是对所有HTML标记起作用，其语法格式为：

     *{property:value}

其中，“*”表示对所有标记起作用，property表示CSS3属性名称，value表示属性值，示例如下所示。

     *{margin:0; padding:0;}  /*设置所有标记的外边距和内边距都为0*/

【例6.13】（实例文件：ch06\6.13.html）

在IE 11.0中的浏览效果如图6-19所示，两个段落和标题都是以红色字体显示，字体大小为30px。

图6-19 全局选择器

6.4.5 组合选择器

将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器，即将标记选择器、类选择器和ID选择器组合起来使用。一般的组合方式是标记选择器和类选择器组合或标记选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以本小节只介绍标记选择器和类选择器的组合。

组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际应用中会经常使用，其语法格式为：

     tagName. class Value{property:value}

在使用的时候一般用在重复出现并且样式相同的一些标记里，例如li列表、td单元格和dd自定义列表等，示例如下所示。

     h1.red{color: red}
     <h1 class="red"></h1>

【例6.14】（实例文件：ch06\6.14.html）

在IE 11.0中的浏览效果如图6-20所示。其中，第一个段落颜色为红色，采用的是标记选择器；第二个段落显示的是蓝色，采用的是标记选择器和类选择器组合的选择器；标题以绿色字体显示，采用的是类选择器。

图6-20 组合选择器显示

6.4.6 继承选择器

继承选择器的规则是：子标记在没有定义的情况下所有的样式是继承父标记的；当子标记重新定义父标记已经定义过的声明时，子标记会执行后面的声明，其中与父标记不冲突的地方仍然沿用父标记的声明。

使用继承选择器就必须先了解HTML文档树和CSS继承，这样才能够很好地运用继承选择器。每个HTML都可以被看作一个文档树，文档树的根部就是<html>标记，而<head>和<body>标记就是其标记。在<head>和<body>里的其他标记就是<html>标记的孙子标记。整个HTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙标记继承祖先标记的某些属性，示例如下所示。

对于上面的代码而言，如果其修饰样式为：

     .test span img {border:1px blue solid;}

则表示该选择器先找到class为test的标记，然后从它的子标记里查找<span>标记，再从<span>的子标记中找到<img>标记。也可以采用下面的形式：

     div span img {border:1px blue solid;}

可以看出其规律是从左往右依次细化，最后锁定要控制的标记。

【例6.15】（实例文件：ch06\6.15.html）

在IE 11.0中的浏览效果如图6-21所示。其中，第一个标题颜色为红色，但是“继承”两个字使用绿色显示并且大小为40px，除了这两个设置外的其他CSS样式都是继承父标记<h1>的样式（例如下画线设置），第二个标题虽然使用了font标记修饰选择器，但其样式都是继承于父类标记<h1>。

图6-21 继承选择器

6.4.7 伪类

伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标记上的，而是作用在标记的状态上。由于很多浏览器支持不同类型的伪类，并且没有一个统一的标准，因此很多伪类都不常被用到。伪类包括:first-child、:link、:vistited、:hover、:active、:focus和:lang等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link、:vistited、:hover和:active。

伪类选择器定义的样式最常应用在标记<a>上，表示超链接4种不同的状态：未访问超链接（link）、已访问超链接（visited）、鼠标停留在超链接上（hover）和激活超链接（active）。需要注意的是，<a>标记可以只具有一种状态（:link），也可以同时具有两种或者三种状态。比如说，任何一个有href属性的<a>标记，在未有任何操作时都已经具备了:link状态，也就是满足了有链接属性这个条件；如果是访问过的<a>标记，就会同时具备:link、visited两种状态；把鼠标指针移到访问过的<a>标记上时，<a>标记就同时具备了:link、visited、hover三种状态。示例如下所示。

     a:link{color:#FF0000; text-decoration:none}
     a:visited{color:#00FF00; text-decoration:none}
     a:hover{color:#0000FF; text-decoration:underline}
     a:active{color:#FF00FF; text-decoration:underline}

技巧提示

上面的样式表示该超链接未访问时颜色为红色且无下画线，访问后是绿色且无下画线，鼠标指针放在超链接上为蓝色且有下画线，激活超链接时为紫色且有下画线。

【例6.16】（实例文件：ch06\6.16.html）

在IE 11.0中的浏览效果如图6-22所示。将鼠标指针停留在第一个超链接上方时，显示颜色为蓝色；另一个是访问过后的超链接，显示颜色为绿色。

图6-22 伪类显示

6.4.8 属性选择器

前面在使用CSS3样式对HTML标记进行修饰时，都是通过HTML标记名称或自定义名称指向具体的HTML元素，进而控制HTML标记样式。那么能不能直接通过标记属性来进行修饰，而不通过标记名称或自定义名称。直接使用属性控制HTML标记样式的选择器称为属性选择器。

属性选择器根据某个属性是否存在或属性值来寻找元素，因此能够实现某些非常有意思和强大的效果。CSS2标准就已经出现了4个属性选择器，在CSS3标准中又新加了3个属性选择器，也就是说现在的CSS3标准共有7个属性选择器，它们共同构成了CSS功能强大的标记属性过滤体系。

在CSS3标准中，常见属性选择器如表6-1所示。

表6-1 常见属性选择器

【例6.17】（实例文件：ch06\6.17.html）

在IE 11.0中的浏览效果如图6-23所示。其中，第一个段落使用属性align定义样式，其字体颜色为红色；第二个段落使用属性值left修饰样式，其字体颜色为红色，大小为20px并且加粗显示，是因为该段落使用了align这个属性；第三个段落字体显示为蓝色，且带有下画线，是因为属性lang的值前缀为en。最后一个图片以边框样式显示，是因为属性值后缀为gif。

图6-23 属性选择器显示

6.4.9 结构伪类选择器

结构伪类选择器（Structural pseudo-classes）是CSS3新增的类型选择器。顾名思义，结构伪类就是利用文档结构树（DOM）实现元素过滤，也就是说，通过文档结构的相互关系来匹配特定的元素，从而减少文档内对class属性和id属性的定义，使得文档更加简洁。

在CSS3版本中，新增结构伪类选择器，如表6-2所示。

表6-2 新增结构伪类选择器

【例6.18】（实例文件：ch06\6.18.html）

在IE 11.0中的浏览效果如图6-24所示。其中，表格中奇数行显示指定颜色，并且最后一行字体的大小以20px显示，其原因就是采用了结构伪类选择器。

图6-24 结构伪类选择器

6.4.10 UI元素状态伪类选择器

UI元素状态伪类（The UI element states pseudo-classes）也是CSS3新增选择器。其中，UI即User Interface（用户界面）的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性，有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

UI元素的状态一般包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。CSS3定义了3种常用的状态伪类选择器，详细说明如表6-3所示。

表6-3 常用的状态伪类选择器

【例6.19】（实例文件：ch06\6.19.html）

在IE 11.0中的浏览效果如图6-25所示。其中，表格中可用的表单元素都显示为浅黄色，而不可用的元素显示为灰色。

图6-25 UI元素状态伪类选择器应用