CSS3+DIV网页样式与布局案例课堂（第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.2 CSS的常用选择器

选择器（selector）也被称为选择符，所有HTML中的标记都是通过不同的CSS3选择器进行控制的。选择器不只是HTML文档中的元素标记，它还可以是类、ID或是元素的某种状态。根据CSS选择符的用途可以把选择器分为标签选择器、类选择器、ID选择器、全局选择器和伪类选择器等。

3.2.1 案例1——标签选择器

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

标签选择器最基本的形式如下所示：

tagName{property:value}

提示

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

【例3.1】（案例文件：ch03\3.1.html）

<!DOCTYPE html>
<html>
<head>
<title>标签选择器</title>
<style>
p{color:blue;font-size:20px;}
</style>
</head>
<body>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。</p>
</body>
</html>

在IE 11.0浏览器中浏览效果如图3-1所示，可以看到段落以蓝色字体显示，大小为20px。

图3-1 标签选择器显示

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

提示

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

3.2.2 案例2——类选择器

在一个页面中，使用标签选择器，会控制该页面中所有此标记显示样式。如果需要为此类标记中其中一个标记重新设定，此时仅使用标签选择器是不能达到效果的，还需要使用类（class）选择器。

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

.classValue {property:value}

classValue是选择器的名称，具体名称由CSS制定者自己命名。

【例3.2】（案例文件：ch03\3.2.html）

在IE 11.0浏览器中浏览效果如图3-2所示，可以看到第一个段落以蓝色字体显示，大小为20px，第二段落以红色字体显示，大小为22px，标题同样以红色字体显示，大小为22px。

图3-2 类选择器显示

3.2.3 案例3——ID选择器

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

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

#idValue{property:value}

在上述语法格式中，idValue是选择器名称，可以由CSS定义者自己命名。

【例3.3】（案例文件：ch03\3.3.html）

在IE 11.0浏览器中浏览效果如图3-3所示，可以看到第一个段落以红色字体显示，大小为22px，第二个段落以蓝色字体显示，字体加粗，标题同样以红色字体显示，大小为22px。

图3-3 ID选择器显示

3.2.4 案例4——选择器的声明

在CSS中，除了常规的选择器声明外，还有集体声明和嵌套声明两种方式。在“集体声明”中，我们可以为多个HTML标签声明同一个CSS样式，如下面的代码，就是同时为h1、h2、p三个标签声明了相同的样式。

h1,h2,p{
 color:red;
font-size:20px;
font-weight:bolder;
}

此外，还有嵌套声明方式，即对指定位置的HTML标记进行修饰，例如当<p>与</p>之间包含<a></a>标记时，就可以使用这种嵌套声明方式对HTML标记进行修饰。

【例3.4】（案例文件：ch03\3.4.html）

<!DOCTYPE html>
<html>
<head>
<title>多重嵌套声明</title>
<style>
p{font-size:20px;}
p a{color:red;font-size:30px;font-weight:bolder;}
</style>
</head>
<body>
<p>头上红冠不用裁，满身雪白走将来。平生不敢轻言语，一叫千门万户开。<a href="">画鸡
</a></p>
</body>
</html>

在IE 11.0浏览器中浏览效果如图3-4所示，可以看到在段落中，超级链接显示红色字体，大小为30px，其原因是使用了嵌套声明。

图3-4 多重嵌套声明

上一章目录下一章