第3章
CSS语法基础
ＣＳＳ（Ｃａｓｃａｄｉｎｇ
Ｓｔｙｌｅｓ
Ｓｈｅｅｔｓ，层叠样式表）
，
是用于控制网页样式并允许将样式信息
与网页内容分离的一种标记性语言。ＨＴＭＬ
和ＣＳＳ
就是
“
内容
”
和
“
形式
”
的关系，由
ＨＴＭＬ
组织网页内容的结构，而通过ＣＳＳ
决定页面的表现形式。
ＣＳＳ
的主要用途包括两大方面
： ①
页面元素美化，由于ＨＴＭＬ
的主要功能是描述网
页的结构，所以控制网页元素外观的能力很差，如无法精确调整文字大小、行距等，而且不
能对多个网页元素进行统一的样式设置，只能一个一个元素地设置。使用ＣＳＳ
可实现对
网页的外观进行更灵活、丰富的控制，使网页更美观
； ②
页面布局，利用ＣＳＳ
的盒子模型
和相关属性可以将网页分栏分块，从而搭建出页面的版式。
３．１ ＣＳＳ
基础
ＣＳＳ
基础
ＣＳＳ
样式表是由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，ＣＳＳ
语言实际上是一种描述ＨＴＭＬ
元素外观（样式）的语言。
３．１．１ ＣＳＳ的语法
ＣＳＳ
代码包含很多条ＣＳＳ
样式规则。一条ＣＳＳ
样式规则由选择器（ｓｅｌｅｃｔｏｒ，也称选
择符）和声明（ｄｅｃｌａｒａｔｉｏｎｓ）组成，如图３.
１
所示。
网页一般由很多ＨＴＭＬ
元素组成，ＣＳＳ
要将样式规则应用到特定的元素上，就必须
先选中这些元素。选择器是为了选中网页中的特定元素，也就是告诉浏览器，这段ＣＳＳ
样式规则将应用到哪组（或哪个）元素上。
图３.１ ＣＳＳ
样式规则的组成（标记选择器
）
选择器用来定义ＣＳＳ
规则的作用范围，它可以是一个标记名，表示将网页中所有
该
６０
标记的元素全部选中。图３.
１
中的ｈ１
就是一个标记选择器，它会将网页中所有＜ｈ１＞
标记
的元素全部选中，选择器还可以是“．类名”或“＃ｉｄ
名”
，
它们的作用范围如图３.
２
所示。
而声明则用于定义选中元素的样式。介于
大括号｛
｝
的所有内容都是声明，声明又分为属
性（ｐｒｏｐｅｒｔｙ）和值
（
ｖａｌｕｅ）
，
图３.
１
中为＜ｈ１＞
标
记的元素定义了两个属性，作用是使所有ｈ１
元
素的文本变为红色、２５
像素大小。
图３.２ 选择器的作用范围属性是ＣＳＳ
样式控制的核心，ＣＳＳ
提供了
丰富的样式属性，如颜色、大小、背景等，绝大多
数ＣＳＳ
属性都是公共属性，任何ＨＴＭＬ
元素都可以使用。表３.
１
列出了一些常用的ＣＳＳ
属性。
表３.１ 一些常用的ＣＳＳ
属性
ＣＳＳ
属性含 义举 例
ｆｏｎｔ.ｓｉｚｅ
字体大小ｆｏｎｔ.ｓｉｚｅ：１４ｐｘ；
ｃｏｌｏｒ
字体颜色（仅能设置字体的颜色
）
ｃｏｌｏｒ：ｒｅｄ；
ｌｉｎｅ.ｈｅｉｇｈｔ
行高ｌｉｎｅ.ｈｅｉｇｈｔ：１６０％
；
ｔｅｘｔ.ｄｅｃｏｒａｔｉｏｎ
文本修饰（如增、删下画线
）
ｔｅｘｔ.ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；
ｔｅｘｔ.ｉｎｄｅｎｔ
文本缩进ｔｅｘｔ.ｉｎｄｅｎｔ：２ｅｍ；
ｂａｃｋｇｒｏｕｎｄ.ｃｏｌｏｒ
背景颜色ｂａｃｋｇｒｏｕｎｄ.ｃｏｌｏｒ：＃ｆｆｅｅａａ；
ＣＳＳ
的属性和值之间用冒号隔开
（
注意ＣＳＳ
属性和值的写法与ＨＴＭＬ
属性的区
别）。如果要设置多个属性，可以书写多条声明，每条声明之间用分号隔开。
对于属性值的书写，有以下规则
：
●
如果属性的某个值是多个单词或者是中文，则值要用引号引起来，如
ｐ ｛
ｆｏｎｔ.
ｆａｍｉｌｙ： ＂
ｓａｎｓ
ｓｅｒｉｆ＂
｝
；
●
如果一个属性有多个值，则每个值之间要用空格隔开，如
ａ
｛ｐａｄｄｉｎｇ：
６ｐｘ ０
３ｐｘ｝
；
●
如果要为某个属性设置多个候选值，则每个值之间用逗号隔开，如
ｐ
｛ｆｏｎｔ.ｆａｍｉｌｙ： ＂
Ｔｉｍｅｓ
Ｎｅｗ
Ｒｏｍａｎ＂ ，
Ｔｉｍｅｓ，
ｓｅｒｉｆ
｝。
３．１．２ 在ＨＴＭＬ
中引入ＣＳＳ
的方法
引入ＣＳＳ
ＨＴＭＬ
和ＣＳＳ
是两种作用不同的语言，它们同时对一个网页产生作用，必须通过一
的方法些方法，将ＣＳＳ
与ＨＴＭＬ
挂接在一起，才能正常工作。
在ＨＴＭＬ
中，引入ＣＳＳ
的方法有行内式、嵌入式、链接式和导入式
４
种。
１．
行内式
所有ＨＴＭＬ
标记都有一个通用的属性ｓｔｙｌｅ，行内式就是将元素的ＣＳＳ
规则作为
ｓｔｙｌｅ
属性的属性值写在元素的标记内，例如
：
６１
一段
行内式引入的优点是： 由于ＣＳＳ 规则就写在标记内，其作用对象就是该元素，所以无
须书写ＣＳＳ 选择器。如果需要做测试或对个别元素设置ＣＳＳ 属性时，可以使用这种方
式，只需要书写属性和值，但它没有体现出ＣＳＳ 统一设置许多元素样式的优势。
２． 嵌入式
嵌入式将页面中各种元素的ＣＳＳ 样式设置集中写在＜ｓｔｙｌｅ＞和＜ ／ ｓｔｙｌｅ＞之间，＜ｓｔｙｌｅ＞
标记是专用于引入嵌入式ＣＳＳ 的一个ＨＴＭＬ 标记，它只能放置在文档头部，即＜ｓｔｙｌｅ＞…
＜ ／ ｓｔｙｌｅ＞只能放置在文档的＜ｈｅａｄ＞和＜ ／ ｈｅａｄ＞之间，例如：
为单一的网页设置样式，嵌入式使用更方便，本书接下来的ＣＳＳ 代码一般都采用这
种方式，但是，对于一个包含很多网页的网站来说，如果每个网页都以嵌入式的方式设置
各自的样式，不仅麻烦，冗余代码多，而且网站中各个页面的风格不好统一。因此，对于一
个网站来说，通常都是编写独立的ＣＳＳ 文件，使用以下两种方式之一，引入网站的所有
ＨＴＭＬ 网页文档中。
３． 链接式和导入式
当样式需要应用于很多页面时，外部样式表（外部ＣＳＳ 文件）将是理想的选择。所谓
外部样式表，就是将ＣＳＳ 代码保存成一个单独的文本文件，并将文件的后缀名命名为
．ｃｓｓ。链接式和导入式的目的都是将外部ＣＳＳ 文件引入ＨＴＭＬ 文件中，其优点是可以让
很多网页共享同一个ＣＳＳ 文件。
链接式是在网页头部通过＜ｌｉｎｋ＞标记引入外部ＣＳＳ 文件，例如：
而导入式是通过ＣＳＳ 规则中的＠ｉｍｐｏｒｔ 指令导入外部ＣＳＳ 文件，例如：
链接式和导入式最大的区别在于，链接式使用ＨＴＭＬ 的标记引入外部ＣＳＳ 文件，而
导入式则是用ＣＳＳ 的规则引入外部ＣＳＳ 文件，因此它们的语法不同。
此外，这两种方式的显示效果也略有不同。使用链接式时，会在装载页面主体部分之
前装载ＣＳＳ 文件，这样显示出来的网页一开始就带有样式效果；而使用导入式时，则在整
个页面装载完之后再载入ＣＳＳ 文件，如果页面文件比较大，则开始装载时会显示无样式
的页面。从浏览者的感受来说，这是使用导入式的一个缺陷。
提示： 在初学ＣＳＳ 或制作单个网页时，为了方便，可采取行内式或嵌入式方法引入
６２
ＣＳＳ。但若要制作网站，则主要采用链接式引入外部ＣＳＳ 文件，以便能对网站内的所有页
面统一设置风格，且能通过改变一个外部ＣＳＳ 文件，改变整个网站所有页面的样式。
３．１．３ 选择器的分类
选择器是为了定义ＣＳＳ 规则的作用范围，为了能够灵活选中网页中的某个或某些元
素。ＣＳＳ 定义了很多种选择器，其中基本的ＣＳＳ 选择器有标记选择器、类选择器、ｉｄ 选择
器３ 种。
１． 标记选择器
标记是元素的固有特征，标记选择器用来声明哪种标记采用哪种ＣＳＳ 样式。因此，
每个ＨＴＭＬ 标记名都可以作为相应的标记选择器的名称。标记选择器形式如图３.１ 所
示，它将具有该标记名的所有元素全部选中。
【例３.１】 标记选择器使用示例。
选择器之标记选择器1
选择器之标记选择器2
选择器之标记选择器3
h3 则不适用
以上所有ｐ 元素都会应用ｐ 标记选择器定义的样式，ｈ３ 元素不会受到影响。
提示： 本书对代码采用了简略写法，书中ＣＳＳ 代码均采用嵌入式方式引入ＨＴＭＬ 文
档中。因此，读者只要将代码中的＜ｓｔｙｌｅ＞…＜ ／ ｓｔｙｌｅ＞部分放置在文档的＜ｈｅａｄ＞和＜ ／ ｈｅａｄ＞
之间，将其他ＨＴＭＬ 代码放置在＜ｂｏｄｙ＞和＜ ／ ｂｏｄｙ＞之间，就能还原成可运行的原始代码。
２． 类选择器
标记选择器一旦声明，页面中所有该标记的元素都会产生相应的变化。例如，当声明
＜ｐ＞标记为红色时，页面中所有的ｐ 元素都将显示为红色。如果希望其中某些ｐ 元素不
是红色，而是蓝色，就需要将这些ｐ 元素自定义为一类，用类选择器选中它们；或者希望不
同标记的元素属于同一类，应用同一样式，如希望某些ｐ 元素和ｈ３ 元素都是蓝色，则可以
将这些不同标记的元素定义为同一类。
也就是说，标记选择器根据元素的固有特征（标记名）分类，好比人可以根据固有特
征“肤色”分为黄种人、黑种人和白种人，而类选择器是人为地对元素分类，比如人又可以
分为教师、医生、公务员等这些社会自定义的类别。
要应用类选择器，首先应给相应的元素添加一个ＨＴＭＬ 属性： ｃｌａｓｓ，为元素定义类
名。如果对不同的元素定义相同的类名，那么这些元素将被划分成同一类，例如：
将该元素划入test 类
将该元素划入test 类
选择器
的分类
６３
再根据类名定义类选择器来选中该类元素，类选择器以半角“．”开头，格式如下：
.test{color: red; font-size:20px;}
【例３.２】 类选择器使用示例，运行效果如图３.３ 所示。
无类名,作为对比
应用.one 样式
应用.two 样式
同时应用.one 和.two 样式
h3 也应用.two 样式
图３.３ 类选择器示例
其中两个ｐ 元素和ｈ３ 元素被定义成同一类，而第四
行通过ｃｌａｓｓ ＝ ＂ ｏｎｅ ｔｗｏ＂ 将同时应用两种类选择器的样式，
得到红色１２ 像素的大字体。对一个元素定义多个类名是
允许的，就好像一个人既属于教师又属于作家一样。第一
行的ｐ 元素因未定义类别名则不受影响，仅作为对比。
３． ｉｄ 选择器
ｉｄ 选择器的使用方法与类选择器基本相同。不同之处在于，一个ｉｄ 选择器只能应用
于一个元素，而类选择器可应用于多个元素。ｉｄ 选择器以半角“＃”开头，例如：
#one {color: blue; font-size:18px;}
要应用ｉｄ 选择器定义的样式，首先必须给元素添加ｉｄ 属性，如＜ｉｍｇ ｉｄ ＝ ＂ ｐｉｃ１＂ ＞。
【例３.３】 ｉｄ 选择器使用示例，运行效果如图３.４ 所示。
ID 值为one
ID 值为two
ID 值为two
< !--错误用法-->
ID 值为one two
< !- -错 误用法-->
本例中，第１ 行应用了＃ｏｎｅ 定义的样式。而第２ 行和第３ 行将同一个ｉｄ 选择器应用
到两个元素上，显然违反了一个ｉｄ 选择器只能应用在一个元素上的规定，但浏览器却也
应用了ＣＳＳ 样式且没有报错。
６４
图３.４ ｉｄ 选择器示例
尽管如此，在编写ＣＳＳ 代码时，还是应该养成良好的编码习
惯，一个ｉｄ 最多只能赋予一个ＨＴＭＬ 元素，因为每个元素定义的
ｉｄ 不只是ＣＳＳ 可以调用，ＪａｖａＳｃｒｉｐｔ 等脚本语言也可以调用，如果
一个ＨＴＭＬ 文档中有两个相同ｉｄ 属性的元素， 那么将导致
ＪａｖａＳｃｒｉｐｔ 在查找ｉｄ 时出错（如ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ （）函数）。
第４ 行在浏览器中没有任何ＣＳＳ 样式风格显示，这意味着ｉｄ
选择器不支持像ｃｌａｓｓ 选择器那样的多个ｉｄ 名同时使用。因为每
个元素和它的ｉｄ 是一一对应的关系，不能为一个元素指定多个ｉｄ，也不能将多个元素定
义为一个ｉｄ。类似ｉｄ ＝ ＂ ｏｎｅ ｔｗｏ＂ 这样的写法是错误的。
关于类名和ｉｄ 名是否区分大小写，ＣＳＳ 大体上是不区分大小写的语言，但类名和ｉｄ
名是否区分大小写取决于标记语言是否区分大小写，如果使用ＨＴＭＬ ５ 或ＸＨＴＭＬ 文档
类型声明，那么类名和ｉｄ 名是区分大小写的。另外，ｉｄ 名或类名的第一个字符不能为
数字。
３．１．４ ＣＳＳ 文本修饰
文本的美化是网页美观的一个基本要求。通过ＣＳＳ 强大的文本修饰功能，可以对文
本样式进行更加精细的控制，其功能远比ＨＴＭＬ 中的＜ｆｏｎｔ＞标记强大。
ＣＳＳ 中控制文本样式的属性主要有ｆｏｎｔ.属性类和ｔｅｘｔ.属性类，再加上修改文本颜色
的ｃｏｌｏｒ 属性和行高ｌｉｎｅ.ｈｅｉｇｈｔ 属性，ＤＷ 中这些属性的设置是放在ＣＳＳ 规则定义面板的
“类型”和“区块”中的。
【例３.４】 利用ＣＳＳ 文本属性修饰文本，其显示效果如图３.５ 所示。
思考的权利
2022 年5 月11 日灯下随笔
目前家长热衷于给孩子上各种各样的培训班、补习班。
在学习遇到难题时,不妨出去散步,刚才理解不了的问题往往散步时突然就想明白了。
例３.４ 中用到的ＣＳＳ 属性说明如下。
● ｔｅｘｔ.ｉｎｄｅｎｔ： 首行缩进，段前空两格就是用ｔｅｘｔ.ｉｎｄｅｎｔ： ２ｅｍ 实现的。
● ｌｉｎｅ.ｈｅｉｇｈｔ： 行距，１６０％表示行距为字体高度的１．６ 倍。
● ｌｅｔｔｅｒ.ｓｐａｃｉｎｇ： 设置字符间的水平间距。
● ｔｅｘｔ.ａｌｉｇｎ： 设置文本的水平对齐方式。
● ｃｏｌｏｒ： 设置字体颜色（只能设置字体颜色，不能设置其他颜色）。
大多数ＨＴＭＬ 元素在浏览器中的默认行距是单倍行距，显得过窄。因此，制作网页
时一般要对ＣＳＳ 文本属性进行调整，网页中常用的字体大小有１６ｐｘ 和１８ｐｘ，目前网页文
６５
图３.５ 用ＣＳＳ 文本属性修饰文本
本样式设计的趋势是采用大字体、大行距。
如果要设置的字体属性过多，可以使用字体缩写属性： ｆｏｎｔ，例如“ｆｏｎｔ： １２ｐｘ ／ １．６
Ａｒｉａｌ；”表示１２ 像素字体大小、１．６ 倍行距，但必须同时定义字体和字号才有效，因此这条
规则中定义的字体“Ａｒｉａｌ”是不能省略的。
３．２ ＣＳＳ 的特性
ＣＳＳ 具有两大特性： 层叠性和继承性。利用这两大特性可大大减少ＣＳＳ 代码的
编写。
３．２．１ ＣＳＳ 的层叠性
所谓层叠性，是指多个ＣＳＳ 选择器的作用范围发生了叠加，比如页面中某些元素同
时被多个选择器选中（就好像同一案例适用于多个法律条文一样）。层叠性讨论的问题
是： 当有多个选择器都作用于同一元素时，ＣＳＳ 该如何处理？
ＣＳＳ 的处理原则是：
（１） 如果多个选择器定义的规则未发生冲突，则元素将应用所有选择器定义的样式。
【例３.５】 选择器层叠不冲突时的样式，其显示效果如图３.６ 所示。
标记选择器选中
标记选择器2
ＣＳＳ 的特性
６６
图３.６ 选择器层叠不冲突时的样式
在代码中，所有ｐ 元素都被标记选择器ｐ 选
中，同时第３、４ 个ｐ 元素又被类选择器． ｓｐｅｃｉａｌ 选
中，第４ 个ｐ 元素还被ｉｄ 选择器ｕｎｄｅｒｌｉｎｅ 选中，由
于这些选择器定义的规则没有发生冲突，因此被多
个选择器同时选中的第３、４ 个元素将应用多个选
择器定义的样式。
（２） 如果多个选择器定义的规则发生了冲突，则ＣＳＳ 按选择器的优先级让元素应用
优先级高的选择器定义的样式。ＣＳＳ 规定选择器的优先级从高到低依次为
行内样式> ID 选择器> 类选择器> 标记选择器
总的原则是： 越特殊的样式，优先级越高。
【例３.６】 选择器层叠冲突时的样式。
这是第1 行文本
这是第2 行文本
这是第3 行文本
这是第4 行文本
这是第5 行文本
由于类选择器的优先级比标记选择器的优先级高，而类选择器中定义的文字颜色规
则和标记选择器中定义的发生了冲突，因此被两个选择器都选中的第２ 行ｐ 元素将应用
．ｇｒｅｅｎ 类选择器定义的样式，而忽略ｐ 选择器定义的规则，但ｐ 选择器定义的其他样式还
是有效的。因此，第２ 行ｐ 元素显示为绿色斜体的文字；同理，第３ 行ｐ 元素将按优先级
高低应用ＩＤ 选择器的样式，显示为红色斜体；第４ 行ｐ 元素将应用行内样式，显示为橙色
斜体；第５ 行ｐ 元素同时应用了两个类选择器ｃｌａｓｓ ＝ ＂ ｐｕｒｐｌｅ ｇｒｅｅｎ＂ ，两个选择器的优先级
相同，这时会以ＣＳＳ 代码中后出现的选择器（．ｐｕｒｐｌｅ）为准，显示为紫色斜体。
（３） ！ｉｍｐｏｒｔａｎｔ 关键字。
！ｉｍｐｏｒｔａｎｔ 关键字用来强制提升某条声明的重要性。如果在不同选择器中定义的声
明发生冲突，而且某条声明后带有！ｉｍｐｏｒｔａｎｔ，则优先级规则为“！ｉｍｐｏｒｔａｎｔ ＞行内样式＞
ＩＤ 选择器＞ 类选择器＞ 标记选择器”。对于例３.６，如果给．ｇｒｅｅｎ 选择器中的声明后添
加！ｉｍｐｏｒｔａｎｔ，则第三行和第五行文本都会变为绿色，在任何浏览器中都是这种效果。
６７
.green{ /.类选择器./
color:green!important; } /.通过!important 提升该选择器的优先级./
如果在同一选择器中定义了两条相冲突的规则，那么ＩＥ ６ 总是以最后一条规则为
准，不认！ｉｍｐｏｒｔａｎｔ，而Ｃｈｒｏｍｅ ／ ＩＥ ７＋以定义了！ｉｍｐｏｒｔａｎｔ 的为准。
#box {
color:red!important; /.除IE 6 外的其他浏览器以这条规则为准./
color:blue; } /.IE 6 总是以最后一条规则为准./
！ｉｍｐｏｒｔａｎｔ 用法总结： ①若在同一选择器中定义的多条样式发生冲突，则ＩＥ ６ 会忽
略样式后的！ｉｍｐｏｒｔａｎｔ 关键字，总是以最后定义的那条样式为准；②如果在不同选择器中
定义的样式发生冲突，那么所有浏览器都以！ｉｍｐｏｒｔａｎｔ 样式的优先级为最高。
３．２．２ ＣＳＳ 的继承性
ＣＳＳ 的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么
子元素将继承父元素的样式风格，并可以在父元素样式的基础上再添加新的样式，而子元
素的样式风格不会影响父元素。
【例３.７】 ＣＳＳ 的继承性示例，显示效果如图３.７ 所示。
十二星座传说
白羊座的传说
天蝎座的传说
作者： 莫某某
图３.７ ＣＳＳ 的继承性示例
本例中，ｂｏｄｙ 标记选择器定义的文本居中，１４ｐｘ 字
体、带下画线等属性都被所有子元素（ｈ２ 和ｐ）所继承，因
此前３ 行完全应用了ｂｏｄｙ 定义的样式，而且ｐ 元素还把
它继承的样式传递给了子元素ｅｍ，但第四行的ｐ 元素由
于通过“．ｗｒｉｔｅ”类选择器重新定义了右对齐的样式，因此
将覆盖父元素ｂｏｄｙ 的居中对齐，显示为右对齐。
由于浏览器对ｈ２ 标题元素预定义了默认样式，该样式覆盖了ｈ２ 元素继承的ｂｏｄｙ 标
记选择器定义的１４ｐｘ 字体样式，结果显示为ｈ２ 元素的字体大小，粗体。可见，继承的样
式比元素的浏览器默认样式的优先级还要低。如果要使ｈ２ 元素显示为１４ｐｘ 大小，需要
对该元素直接定义字体大小，以覆盖浏览器默认样式。
ＣＳＳ 的继承贯穿整个ＣＳＳ 设计的始终，每个标记都遵循ＣＳＳ 继承的概念。可以利用
这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关
系复杂的情况下。例如，如果网页中大部分文字的字体大小都是１４ｐｘ，则可以对ｂｏｄｙ 元
６８
素定义字体大小为１２ 像素。这样，其他元素都会继承这一样式，就不需要对这么多的子
元素分别定义样式了，有些特殊的地方如果字体大小要求是１８ｐｘ，则可再利用类选择器
或ｉｄ 选择器对它们单独定义。
实际上，ＨＴＭＬ 文档是一个如图３.８ 所示的树状结构（称为文档对象模型（ＤＯＭ）），
因此ＨＴＭＬ 中的元素都存在继承关系，ＣＳＳ 的继承性正是基于元素的这种继承关系。
图３.８ 文档对象模型（ＤＯＭ）图
需要指出，并不是所有的ＣＳＳ 属性都具有继承性，一般ＣＳＳ 的文本属性具有继承性，
而其他属性（如背景属性、布局属性等）则不具有继承性。
具有继承性的属性大致有： ｃｏｌｏｒ、ｆｏｎｔ.（以ｆｏｎｔ 开头的属性）、ｔｅｘｔ.ｉｎｄｅｎｔ、ｔｅｘｔ.ａｌｉｇｎ、
ｌｉｎｅ.ｈｅｉｇｈｔ、ｌｅｔｔｅｒ.ｓｐａｃｉｎｇ、ｂｏｒｄｅｒ.ｃｏｌｌａｐｓｅ、ｏｐａｃｉｔｙ 等。无继承性的属性有ｔｅｘｔ.ｄｅｃｏｒａｔｉｏｎ，
所有盒子属性（边框、边界、填充），布局属性（如ｆｌｏａｔ）等。
３．２．３ 选择器的组合
每个选择器都有它的作用范围，前面介绍的各种基本选择器，其作用范围都是一个单
独的集合，如标记选择器的作用范围是具有该标记的所有元素的集合，类选择器的作用范
围是自定义的一类元素的集合。如果希望对几种选择器的作用范围取交集、并集、子集以
选中需要的元素，就要用到复合选择器了，它是通过对几种基本选择器的组合，实现更强、
更方便的选择功能。
复合选择器就是两个或多个基本选择器，通过不同方式组合形成的选择器，主要有交
集选择器、并集选择器和后代选择器。
１． 交集选择器
交集选择器由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集。
其中第一个必须是标记选择器，第二个必须是类选择器或ｉｄ 选择器。例如，ｈ１．ｃｌａｓ１ 和
ｐ＃ｉｎｔｒｏ 这两个选择器之间不能有空格，格式如下。
h1.clas1 {color: green; font-size:24px;}
６９
交集选择器将选中同时满足前后二者定义的元素，也就是前者定义的标记类型，并且
指定了后者类名或ｉｄ 的元素。
【例３.８】 交集选择器应用示例。
普通段落文本
普通h3 标题文本
指定了special 类别的段落
指定了special 类别的h3 标题
例３.８ 中，ｐ 标记选择器选中了第一、三行文本；．ｓｐｅｃｉａｌ 类选择器选中了第三、四行文
本，ｐ．ｓｐｅｃｉａｌ 选择器选中了第三行文本，是两者的交集，用于对段落文本中的第三行进行
特殊控制。第二行未被任何选择器选中，仅作对比。
２． 并集选择器
所谓并集选择器，其实就是对多个选择器进行集体声明，多个选择器之间用“，”隔
开，其中每个选择器都可以是任意类型的选择器。如果某些选择器定义的样式完全相同，
或者部分相同，就可以用并集选择器同时声明这些选择器完全相同或部分相同的样式。
【例３.９】 并集选择器应用示例，其显示效果如图３.９ 所示。
h1 元素
h3 元素
h4 元素
图３.９ 并集选择器示例
代码通过集体声明ｈ１、ｈ２、ｈ３、ｐ 的样式，为选中的第１、
２、３、５ 行的元素添加了背景色，然后对需要特殊设置的第２、
４ 行添加了下画线。
上述代码中还使用了通配符选择器“.”，网页中的任何
元素都会被通配符“.”选中。
３． 后代选择器
在ＣＳＳ 选择器中，还可以通过嵌套的方式，对内层的元素进行控制。例如，当＜ｂ＞标
记被包含在＜ａ＞标记中时，就可以使用后代选择器ａ ｂ｛…｝选中出现在ａ 元素中的ｂ 元
素。后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格
隔开。
７０
【例３.１０】 后代选择器应用示例，其显示效果如图３.１０ 所示。
这是b 标记中的文字
这是a 标记中的b标记
图３.１０ 后代选择器示例
其中ａ 元素被标记选择器ａ 选中，显示为１６ｐｘ 红色字
体；而ａ 元素中的ｂ 元素被后代选择器ａ ｂ 选中，背景色被定
义为淡紫色；第一行的ｂ 元素未被任何选择器选中。
同其他ＣＳＳ 选择器一样，后代选择器定义的样式同样也
能被其子元素继承。例如，在本例中，ｂ 元素内又包含了
ｓｐａｎ 元素，那么ｓｐａｎ 元素也将显示为淡紫色。这说明子元素（ｓｐａｎ）继承了父元素（ａ ｂ）
的颜色样式。
后代选择器的使用非常广泛，实际上不仅标记选择器可以用这种方式组合，类选择器
和ＩＤ 选择器也都可以进行嵌套，而且后代选择器还能进行多层嵌套。例如：
.special b { color : red } /.应用了类special 的元素里包含的./
#menu li { padding : 0 6px ; } /.ID 为menu 的元素里包含的./
td.top .ban1 strong{ font-size : 16px ; } /.多层嵌套,同样适用./
#menu a:hover b /.ID 为menu 的元素里的a :hover 伪类里包含的./
提示： 选择器的嵌套在ＣＳＳ 的编写中可大大减少对ｃｌａｓｓ 或ｉｄ 的定义。因为在构建
ＨＴＭＬ 框架时，通常只需给父元素定义ｃｌａｓｓ 或ｉｄ，子元素能通过后代选择器选择的，则利
用这种方式，而不需要再定义新的ｃｌａｓｓ 或ｉｄ。
４． 复合选择器的优先级
复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道基本选择器
的优先级是“ＩＤ 选择器＞ 类选择器＞ 标记选择器”，所以不妨设ＩＤ 选择器的优先级权重
是１００，类选择器的优先级权重是１０，标记选择器的优先级权重是１，那么复合选择器的
优先级就是组成它的各个选择器权重值的和。例如：
h1{color:red;} /.权重=1./
p em{color:blue;} /.权重=2./
.warning{color:yellow;} /.权重=10./
p.note em.dark{color:gray;} /.权重=22./
#main{color:black;} /.权重=100./
当权重值一样时，会采用“层叠原则”，一般后定义的会被应用。
【例３.１１】 复合选择器优先级计算的例子。
７１
对于＜ｌｉ＞标记中的内容，它同时被“＃ａａ ｕｌ ｌｉ”和“．ａａ”两个选择器选中，由于＃ａａ ｕｌ ｌｉ
的优先级为１０２，而．ａａ 的优先级为１０，所以ｌｉ 中的内容将应用＃ａａ ｕｌ ｌｉ 定义的规则，文字
图３.１１ ＣＳＳ 样式的优先级
为红色，如果希望文字为蓝色，可提高．ａａ 的特
殊性，将其改写成“＃ａａ ｕｌ ｌｉ．ａａ”。
另外，代码中ｅｍ 元素内的文字颜色为蓝
色，因为直接作用于ｅｍ 元素的选择器只有
“．ａａ”，虽然ｅｍ 也会继承“＃ａａ ｕｌ ｌｉ”选择器的样
式，但是继承的样式优先级最低，会被类选择器
“．ａａ”定义的样式所覆盖。
综上所述，ＣＳＳ 样式的优先级如图３.１１
所示。
其中，浏览器对标记预定义的样式是指对
于某些ＨＴＭＬ 标记，浏览器预先对其定义了默认的ＣＳＳ 样式，如果用户没有重新定义样
式，那么浏览器将按其定义的默认样式显示。常见的ＨＴＭＬ 标记在标准浏览器（如
Ｃｈｒｏｍｅ）中默认样式如下。
body{ margin: 8px; line-height: 1.12em }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,h5, h6, b,strong { font-weight: bolder }
有些元素的预定义（默认）的样式在不同的浏览器中区别很大，例如ｕｌ、ｏｌ 和ｄｄ 等列
表元素，ＩＥ 中的默认样式是ｕｌ，ｏｌ，ｄｄ｛ｍａｒｇｉｎ.ｌｅｆｔ：４０ｐｘ；｝，而Ｆｉｒｅｆｏｘ 中的默认样式定义为
ｕｌ，ｏｌ，ｄｄ ｛ｐａｄｄｉｎｇ.ｌｅｆｔ：４０ｐｘ；｝。因此，要清除列表的默认样式，一般可以如下设置：
ul, ol, dd {
list-style-type:none; /.清除列表项目符号./
margin:0; /.清除IE 左缩进./
padding:0; /.清除非IE 左缩进./
}
３．３ ＣＳＳ 高级选择器
为了能够更加灵活地选中网页中的各类元素，ＣＳＳ 提供了各种高级选择器。
７２
３．３．１ 关系选择器
关系选择器用来选中指定元素的儿子、兄弟、后代等元素，它们能给ＣＳＳ 设计带来方
便，而且对以后学习ｊＱｕｅｒｙ 的选择器也是很有帮助的。
１． 子选择器
子选择器用于选中元素的直接后代（即儿子），它的定义符号是大于号（＞）。
【例３.１２】 子选择器的应用示例。
body>p { color: green; }
这一段文字是绿色
这一段文字是绿色
只有第一个和第三个段落的文字会变为绿色，因为它们是ｂｏｄｙ 元素的直接后代，所
以被选中。而第二个ｐ 元素是ｂｏｄｙ 的间接后代，不会被选中，如果把（ｂｏｄｙ＞ｐ）改为后代
选择器（ｂｏｄｙ ｐ），那么三个段落都会被选中。这就是子选择器和后代选择器的区别。后
代选择器可选中任何后代。
２． 相邻选择器
相邻（ａｄｊａｃｅｎｔ.ｓｉｂｌｉｎｇ）选择器的语法是“Ｅ＋Ｆ”，用于选中元素Ｅ 后面紧邻的一个兄
弟（弟弟）Ｆ 元素（这两个元素具有共同的父元素，并且紧邻在一起）。
【例３.１３】 相邻选择器的应用示例。
h2+p { color: red; }
下面哪些文字是红色的呢
第一段
第二段
下面有文字是红色的吗
第二段
下面哪些文字是红色的呢
这一段文字不是红色
第一段
第二段
可见，共有两行被选中。其中，在最后一个ｈ２ 元素后，尽管紧接的是一段文字，但那
些文字不属于任何标记，因此紧随这些文字之后的第一个ｐ 元素也会被选中。
如果希望紧跟在ｈ２ 后面的任何元素都变成红色，则可使用如下方法，那么第二个ｈ２
后的ｄｉｖ 元素也会被选中。
h2+. { color: red; }
７３
３． 兄弟选择器
兄弟选择器的语法是“Ｅ ～ Ｆ”，用于选中元素Ｅ 后面的所有兄弟Ｆ 元素。
【例３.１４】 兄弟选择器的应用示例。
h2~p { color: red; }
下面哪些文字是红色的呢
第一段
第二段
下面有文字是红色的吗
第二段
下面哪些文字是红色的呢
这一段文字不是红色
第一段
第二段
可见，兄弟选择器选中了所有的弟弟元素，其选择范围比相邻选择器更广。
３．３．２ 属性选择器
引入属性选择器后，ＣＳＳ 变得更加复杂、准确、功能强大。属性选择器主要有３ 种形
式，分别是： 匹配属性、匹配属性和值、匹配部分属性值。属性选择器的定义方式是将属
性和值写在“［］”内，“［］”前面可以加标记名、类名等基本选择器。
１． 匹配属性Ｅ［ａｔｔ］
属性选择器选中具有某个指定属性的元素，例如：
a［name］ {color:purple; } /.选中具有name 属性的a 元素./
img［border］ {border-color:gray;} / .选中具有border 属性的img 元素./
［special］ {color:red;} /.选中具有special 属性的任何元素./
这些情况下，只要给定属性在元素中出现（无论属性值是什么），便会匹配该属性选
择器，还可给元素自定义一个它没有的属性名，如＜ｉｍｇ ｓｐｅｃｉａｌ ＝ ＂ ＂ ＞，那么这个ｉｍｇ 元素
会被［ｓｐｅｃｉａｌ］属性选择器选中，这时属性选择器就相当于类选择器或ＩＤ 选择器的作
用了。
２． 匹配属性和值Ｅ［ａｔｔ ＝＂ｖａｌ＂］
属性选择器也可根据元素具有的属性和值匹配，例如：
a［href="http://www.hynu.cn"］ {color:yellow; }
/.选中指向www.hynu.cn 的链接./
input［type="submit"］ {background:purple; } /.选中表单中的提交按钮./
img［alt="Sony Logo"］［class="pic"］ {margin:20px;} /. 同时匹配两个属性和值./
这样，用属性选择器就能很容易地选中某个特定的元素，而不用为这个特定的元素定
７４
义一个ｉｄ 或类，再用ｉｄ 或类选择器匹配它了。
３． 匹配部分属性值
ＣＳＳ 提供了５ 种匹配部分属性值的属性选择器，如表３.２ 所示。
表３.２ 匹配部分属性值的属性选择器
选 择 器功 能
Ｅ［ａｔｔ～ ＝ ＂ ｖａｌ＂ ］ 选择ａｔｔ 属性值为一用空格分隔的词列表，其中一个词是ｖａｌ 的Ｅ 元素
Ｅ［ａｔｔ.＝ ＂ ｖａｌ＂ ］ 选择ａｔｔ 属性值中包含字符串ｖａｌ 的Ｅ 元素
Ｅ［ａｔｔ ｜ ＝ ＂ ｖａｌ＂ ］ 选择ａｔｔ 属性值以“ｖａｌ.”开头或属性值为ｖａｌ 的Ｅ 元素
Ｅ［ａｔｔ^＝ ＂ ｖａｌ＂ ］ 选择ａｔｔ 属性值为以ｖａｌ 开头的Ｅ 元素
Ｅ［ａｔｔ ＄ ＝ ＂ ｖａｌ＂ ］ 选择ａｔｔ 属性值为以ｖａｌ 结尾的Ｅ 元素
其中，Ｅ［ａｔｔ ～ ＝ ＂ ｖａｌ＂ ］能匹配属性值列表中的单个属性值，由于对一个元素可指定多
个类名，因此匹配单个属性值的选择器就可以选中具有某个类名的元素，这才是它的主要
用途。【
例３.１５】 属性选择器的应用示例。
h2［class~ ="two"］ { color: red;} /.匹配具有类名为two 的h2 元素./
h2［class.="wo"］{ font-style:italic;}
h2［class $ ="ree"］{ text-decoration:underline;}
h2［class^="on"］{ background-color:#fcc;}
p［data|="a"］ { color:green; font-weight:bold; }
文字是红色
这一段文字是绿色
３．３．３ 伪类选择器
伪类（ｐｓｅｕｄｏ.ｃｌａｓｓ）是用来表示动态事件、状态改变或者在文档中以其他方法不能轻
易实现的情况———例如用户的光标悬停或单击某元素。总的来说，伪类可以对目标元素
出现某种特殊的状态应用样式。这种状态可以是光标停留在某个元素上，或者是访问一
个超链接。伪类允许设计者自由指定元素在一种状态下的外观。
１． 常见的伪类选择器
常见的伪类有４ 个，分别是：ｌｉｎｋ（链接）、：ｖｉｓｉｔｅｄ（已访问的链接）、：ｈｏｖｅｒ（光标悬停
状态）和：ａｃｔｉｖｅ（激活状态）。其中前面两个称为链接伪类，只能应用于链接（ａ）元素，后
两种称为动态伪类，理论上可以应用于任何元素。其他的一些伪类如：ｆｏｃｕｓ，表示获得焦
点时的状态，一般用在表单元素上。
伪类选择器前面必须是标记名（或类名、ｉｄ 名等选择器名），后面是以“：”开头的伪
类名，如图３.１２ 所示。
图３.１２ 中的伪类选择器的作用是定义所有ａ 元素在光标悬停（ｈｏｖｅｒ） 状态下的
样式。
：ｈｏｖｅｒ 伪类
选择器
７５
图３.１２ 伪类选择器
２． 制作动态超链接
在ＨＴＭＬ 中，超链接默认都是统一的蓝色带下画线，被单击过的超链接则为紫色带
下画线，这种传统的超链接样式看上去过于呆板。
在ＣＳＳ 中，去掉文本下画线的方法是设置ｔｅｘｔ.ｄｅｃｏｒａｔｉｏｎ： ｎｏｎｅ；添加下画线则是
ｔｅｘｔ.ｄｅｃｏｒａｔｉｏｎ： ｕｎｄｅｒｌｉｎｅ； ｔｅｘｔ.ｄｅｃｏｒａｔｉｏｎ 属性的其他值还有ｌｉｎｅ.ｔｈｒｏｕｇｈ （ 中画线），
ｏｖｅｒｌｉｎｅ（上画线）等。
为了让网页中的超链接具有动态效果，例如，超链接初始时没有下画线，而当光标经
过超链接上时，超链接会变色并添加下画线等，以提示用户可以单击。ＣＳＳ 伪类选择器可
实现这种动态超链接效果。
因为伪类可以描述超链接元素在各种状态下的样式，所以通过定义ａ 元素的各种伪
类具有不同的样式，就能制作出千变万化的动态超链接效果。具体来说，ａ 元素可定义的
伪类有４ 种，用来描述链接的４ 种状态，如表３.３ 所示。
表３.３ 超链接＜ａ＞标记的４ 个伪类
伪 类作 用
ａ：ｌｉｎｋ 超链接的普通样式风格，即正常浏览状态时的样式
ａ：ｖｉｓｉｔｅｄ 被单击过的超链接的样式风格
ａ：ｈｏｖｅｒ 光标悬停在超链接上时的样式风格
ａ：ａｃｔｉｖｅ 当前激活（在鼠标单击与释放之间发生）的样式风格
只要分别定义上述４ 种状态（或其中几种）的样式代码，就能实现动态超链接效果，
如图３.１３ 所示。
图３.１３ 动态超链接
【例３.１６】 动态超链接效果，其显示效果如图３.１３ 所示。
首页系部概况联系我们
７６
例３.１６ 中分别定义了链接在四种不同的状态下具有不同的颜色，在光标悬停时还将
添加下画线并改变背景颜色。需要注意的是：
● 链接伪类选择器的书写应遵循ＬＶＨＡ 的顺序，即ＣＳＳ 代码中４ 个选择器出现的顺
序应为ａ：ｌｉｎｋ→ ａ：ｖｉｓｉｔｅｄ→ ａ：ｈｏｖｅｒ→ ａ：ａｃｔｉｖｅ，若违反这种顺序，某些样式可能不
起作用。
● 各种ａ 的伪类选择器将继承ａ 标记选择器定义的样式。
● ａ：ｌｉｎｋ 选择器只能选中具有ｈｒｅｆ 属性的ａ 标记，而ａ 选择器能选中所有ａ 标记，包
括用作锚点的ａ 标记。
３． 制作动态图片边框效果
在ＣＳＳ ２．０＋规范中，任何元素都支持动态伪类，像ｌｉ：ｈｏｖｅｒ、ｉｍｇ：ｈｏｖｅｒ、ｄｉｖ：ｈｏｖｅｒ 和
ｐ：ｈｏｖｅｒ 这些伪类都是合法的，并且使用伪类还能控制元素的后代或兄弟元素的动态效
果。例如ｌｉ：ｈｏｖｅｒ ｕｌ（控制悬停时后代元素的样式）、ｉｍｇ：ｈｏｖｅｒ ～ ｂ（控制悬停时兄弟元素
的样式）。
【例３.１７】 动态图片边框效果，如图３.１４ 所示。
沙漠中的石柱
图３.１４ 动态图片边框效果（左为默认状态，右为光标经过时状态）
４． ：ｆｉｒｓｔ.ｃｈｉｌｄ 伪类
：ｆｉｒｓｔ.ｃｈｉｌｄ 伪类选择器用于匹配它的父元素的第一个子元素，也就是说，这个元素是
它父元素的第一个儿子，而不管它的父元素是哪个。
【例３.１８】 ：ｆｉｒｓｔ.ｃｈｉｌｄ 伪类应用示例。
p:first-child{font-weight: bold;}
这一段文字是粗体
下面哪些文字是粗体的呢
这一段文字不是粗体
７７
下面哪些文字是粗体的呢
下面哪些文字是粗体的呢
这一段文字不是
这一段文字是粗体
这一段文字不是
演示过渡效果
该例产生的动画效果是： 当光标滑到ｄｉｖ 元素上时，ｄｉｖ 元素的宽度会从１００ 像素逐
渐伸展到３００ 像素，动画持续时间为０．５ｓ。
１． 过渡属性详解
ＣＳＳ ３ 的过渡使用ｔｒａｎｓｉｔｉｏｎ 属性定义。ｔｒａｎｓｉｔｉｏｎ 属性的基本语法如下。
７８
transition: transition-property transition -duration transition -timing -
function transition-delay;
ｔｒａｎｓｉｔｉｏｎ 属性实际上是４ 个属性的简写，其各属性值的含义如下。
（１） ｔｒａｎｓｉｔｉｏｎ.ｐｒｏｐｅｒｔｙ： 指定元素的某个属性上会有动画效果。例如：
transition-property:width; /.在width 属性上应用过渡./
transition-property:font-size; /.在font-size 属性上应用过渡./
transition-property:all; /.在所有属性上应用过渡./
（２） ｔｒａｎｓｉｔｉｏｎ.ｄｕｒａｔｉｏｎ 属性指定过渡从开始到结束的持续时间。其属性值是一个时
间值（如０．５ｓ），单位是ｓ（秒）或者ｍｓ（毫秒）。默认值是０ｓ，如果提供一个负值给该属性，
则也会被解释为０ｓ。例如：
transition-duration: 2s; /.过渡持续时间为2s./
注意： ｔｒａｎｓｉｔｉｏｎ.ｄｕｒａｔｉｏｎ 是创建过渡的唯一必要的属性，如果其他过渡属性都省略，
但声明了ｔｒａｎｓｉｔｉｏｎ.ｄｕｒａｔｉｏｎ，过渡也会发生，反过来则不行。
（３） ｔｒａｎｓｉｔｉｏｎ.ｔｉｍｉｎｇ.ｆｕｎｃｔｉｏｎ 属性： 能够让动画在过渡持续期间在速度上有变化，对
动画的节奏进行控制。该属性的取值有两种不同的类型： ①关键字； ②ｃｕｂｉｃ.ｂｅｚｉｅｒ
函数。
关键字的取值有以下５ 种。
● ｅａｓｅ： 默认值，平稳开始和结束，即动画开始和结束时比较慢，中途比较快。
● ｌｉｎｅａｒ： 动态效果一直都匀速进行。
● ｅａｓｅ.ｉｎ： 平稳开始，动画效果开始时比较慢，然后不断加速，直到结束。
● ｅａｓｅ.ｏｕｔ： 平稳结束，动画效果开始时比较快，然后不断减速，直到结束。
● ｅａｓｅ.ｉｎ.ｏｕｔ： 类似于ｅａｓｅ 值，但加速、减速没有那么明显。
（４） ｔｒａｎｓｉｔｉｏｎ.ｄｅｌａｙ 属性用于延迟一段时间后再开启过渡效果，例如，希望在过渡开
始前设置０．５ｓ 的延迟，可以使用下列代码：
transition-delay: 0.5s;
ｔｒａｎｓｉｔｉｏｎ.ｄｅｌａｙ 属性也可设置负值，考虑一个３ｓ 的过渡，但延迟了－１ｓ。当该过渡被
触发时，过渡会立即开始，但看上去就像已经过去了１ｓ 一样，也就是说，整个过渡会从中
途开始。
２． ｔｒａｎｓｉｔｉｏｎ 属性的简写
ｔｒａｎｓｉｔｉｏｎ 属性是４ 个过渡属性的简写形式，该属性可接２ ～ ４ 个值，因为过渡的速度
变化和过渡前的延迟两个属性是可以省略的。但是，不管怎么写，ｔｒａｎｓｉｔｉｏｎ.ｄｅｌａｙ 值必须
写在ｔｒａｎｓｉｔｉｏｎ.ｄｕｒａｔｉｏｎ 值的后面。下面是ｔｒａｎｓｉｔｉｏｎ 缩写的几个示例。
transition: color .5s ease-in .1s; /.作用属性持续时间速度变化延迟./
transition: color .5s .1s; /.作用属性持续时间延迟./
transition: color .5s; /.作用属性持续时间./