资料下载：图解CSS3核心技术与案例实战.pdf

图解CSS3核心技术与案例实战.pdf

http://www.100md.com 2020年1月21日

第1页

第7页

第20页

第28页

第45页

第1111页

参见附件(27722KB，1171页)。

图解CSS3核心技术与案例实战，这本书是资深前端工程师廖伟华所写的教程书，是由作者历时2年精心写作的，采用图文相结合形式，为读者更加容易理解CSS3!

    图解CSS3内容提要

    本书是CSS3领域的标准性著作，由资深Web前端工程师根据CSS3的全新技术标准撰写。内容极为全面、丰富和翔实，由浅入深地讲解了CSS3新特性的语法、功能和使用技巧，涵盖选择器、边框、背景、文本、颜色、UI、动画、新型盒模型、媒体查询、响应式设计等各种模块；写作方式创新，有趣且易懂，用图解的方式来描述CSS3的每一个特性甚至每一个步骤都配有实战效果图；包含大量案例，实战性强，每个特性都有作者从实践中精心归纳和挑选出来的案例辅助讲解，同时还包含一个综合性的大案例。无论你是完全没有经验的准前端工程师，还是已经有一定经验的前端工程师，如果你想系统学习CSS3，那么本书将会是你的合适选择；如果你是一位成熟的前端开发工程师，但时常为如何合理地使用某些特性而费时去查阅相关资料。

    图解CSS3作者学习

    廖伟华(网名：大漠)，资深Web前端工程师，W3cplus创始人，目前就职于Ctrip UED。中国Drupal社区核心成员之一。对HTML5、CSS3、XHTML和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内zui早研究和使用CSS3技术的一批人。现在还关注Web产品策划、交互设计、SEO以及移动端开发。2012年4月刊的《程序员》杂志上发表文章“Twitter Bootstrap：前端框架利器”。

    图解CSS3目录预览

    第1章揭开 CSS3的面纱

    第2章 CSS3选择器

    第3章 CSS3边框

    第4章 CSS3背景

    第5章 CSS3文本

    第6章 CSS3颜色特性

    第7章 CSS3盒模型

    第8章 CSS3伸缩布局盒模型

    第9章 CSS3多列布局

    第10章 CSS3渐变

    第11章 CSS3变形

    第12章 CSS3过渡

    第13章 CSS3动画

    第14章媒体特性与Responsive设计

    第15章嵌入Web字体

    作者为什么要写这本书

    CSS3是在CSS2.1基础上扩展而来，事实上，它还没有完全成熟。有些专家会告诉你，CSS3现在还用不上，甚至几年之后都不会有成熟的规范发布。

    目前为止CSS3还没有一套成熟的规范，其中的模块也在不断更新，特别是浏览器对CSS3特性的支持也在不断变化，同时没有足够的时间去学习和研究W3C官方文档和规范，致使我们学习CSS3变得更为复杂。

    为什么会选择这个时候编写这样一本图书呢？原因很简单。对于希望Web应用开发者而言，CSS3可以说是众望所归，这也是技术变更的硬性需求。在实际Web应用中新标准的采纳程度正在以令人目眩的速度不断地变更着，众多浏览器厂商也在不断加快对CSS3新特性的支持。在编写这本图书的过程中，我也被迫不断更新书中的浏览器支持表格。

    面对自己正在使用的浏览器，大多数用户并不真正了解其具备的功能有多强大。当然，他们在浏览器自动更新后可能会发现一些细微的界面变化。但他们可能不知道，新版的浏览器对哪些CSS3特性有所支持。

    本书的目标是帮助开发者更好地掌握CSS3的特性，并且将新技术运用到实际的开发当中，提高自己开发Web程序的水平。

    图解CSS3核心技术与案例实战截图

Web开发技术丛书

 图解CSS3：核心技术与案例实战

 大漠著

 ISBN：978-7-111-46920-9

 本书纸版由机械工业出版社于2014年出版，电子版由华章分社(北京华

 章图文信息有限公司)全球范围内制作与发行。

 版权所有，侵权必究

 客服热线：+ 86-10-68995265

 客服信箱：service@bbbvip.com

 官方网址：www.hzmedia.com.cn

 新浪微博 @研发书局

 腾讯微博 @yanfabook目录

 前言

 第1章揭开CSS3的面纱

 1.1 什么是CSS3

 1.1.1 CSS3的新特性

 1.1.2 CSS3的发展状况

 1.1.3 现在能使用CSS3吗

 1.1.4 使用CSS3有什么好处

 1.2 浏览器对CSS3的支持状况

 1.2.1 经典回顾：图说浏览器大战

 1.2.2 浏览器的市场份额

 1.2.3 主流浏览器对CSS3支持状况

 1.3 渐进增强

 1.3.1 渐进增强与优雅降级

 1.3.2 渐进增强的优点

 1.4 CSS3的现状及未来

 1.4.1 谁在使用CSS3

 1.4.2 CSS3的未来

 1.5 本章小结

 第2章 CSS3选择器2.1 认识CSS选择器

 2.1.1 CSS3选择器的优势

 2.1.2 CSS3选择器分类

 2.2 基本选择器

 2.2.1 基本选择器语法

 2.2.2 浏览器兼容性

 2.2.3 实战体验：使用基本选择器

 2.2.4 通配选择器

 2.2.5 元素选择器

 2.2.6 ID选择器

 2.2.7 类选择器

 2.2.8 群组选择器

 2.3 层次选择器

 2.3.1 层次选择器语法

 2.3.2 浏览器兼容性

 2.3.3 实战体验：使用层次选择器选择元素

 2.3.4 后代选择器

 2.3.5 子选择器

 2.3.6 相邻兄弟选择器

 2.3.7 通用兄弟选择器

 2.4 动态伪类选择器2.4.1 动态伪类选择器语法

 2.4.2 浏览器兼容性

 2.4.3 实战体验：美化按钮

 2.5 目标伪类选择器

 2.5.1 目标伪类选择器语法

 2.5.2 浏览器兼容性

 2.5.3 实战体验：制作手风琴效果

 2.6 语言伪类选择器

 2.6.1 语言伪类选择器语法

 2.6.2 浏览器兼容性

 2.6.3 实战体验：定制不同语言版本引文风格

 2.7 UI元素状态伪类选择器

 2.7.1 UI元素状态伪类选择器语法

 2.7.2 浏览器兼容性

 2.7.3 实战体验：Bootstrap的表单元素UI状态

 2.8 结构伪类选择器

 2.8.1 重温HTML的DOM树

 2.8.2 结构伪类选择器语法

 2.8.3 浏览器兼容性

 2.8.4 结构伪类选择器中的n是什么

 2.8.5 结构伪类选择器的使用方法详解2.8.6 实战体验：CSS3美化表格

 2.9 否定伪类选择器

 2.9.1 否定伪类选择器语法

 2.9.2 浏览器兼容性

 2.9.3 实战体验：改变图片效果

 2.10 伪元素

 2.10.1 伪元素::first-letter

 2.10.2 伪元素::first-line

 2.10.3 伪元素::before和::after

 2.10.4 伪元素::selection

 2.11 属性选择器

 2.11.1 属性选择器语法

 2.11.2 浏览器兼容性

 2.11.3 属性选择器的使用方法详解

 2.11.4 实战体验：创建个性化链接样式

 2.12 本章小结

 第3章 CSS3边框

 3.1 CSS3边框简介

 3.1.1 边框的基本属性

 3.1.2 边框的类型

 3.1.3 谁在使用CSS3边框3.2 CSS3边框颜色属性

 3.2.1 border-color属性的语法及参数

 3.2.2 浏览器兼容性

 3.2.3 border-color属性的优势

 3.2.4 实战体验：立体渐变边框效果

 3.3 CSS3图片边框属性

 3.3.1 border-image属性的语法及参数

 3.3.2 border-image属性使用方法

 3.3.3 浏览器兼容性

 3.3.4 border-image属性的优势

 3.3.5 实战体验：按钮圆角阴影效果

 3.4 CSS3圆角边框属性

 3.4.1 border-radius属性的语法及参数

 3.4.2 border-radius属性使用方法

 3.4.3 浏览器兼容性

 3.4.4 border-radius属性的优势

 3.4.5 实战体验：制作特殊图形

 3.5 CSS3盒子阴影属性

 3.5.1 box-shadow属性的语法及参数

 3.5.2 box-shadow属性使用方法

 3.5.3 浏览器兼容性3.5.4 box-shadow属性的优势

 3.5.5 实战体验：制作3D搜索表单

 3.6 本章小结

 第4章 CSS3背景

 4.1 CSS3背景属性简介

 4.1.1 背景的基本属性

 4.1.2 与背景相关的新增属性

 4.2 CSS3背景原点属性

 4.2.1 background-origin属性的语法及参数

 4.2.2 background-origin属性使用方法

 4.2.3 浏览器兼容性

 4.3 CSS3背景裁切属性

 4.3.1 background-clip属性的语法及参数

 4.3.2 background-clip属性使用方法

 4.3.3 浏览器兼容性

 4.4 CSS3背景尺寸属性

 4.4.1 background-size属性的语法及参数

 4.4.2 background-size属性使用方法

 4.4.3 浏览器兼容性

 4.4.4 实战体验：制作全屏背景

 4.5 内联元素背景图像平铺循环方式4.6 CSS3多背景属性

 4.6.1 CSS3多背景语法及参数

 4.6.2 CSS3多背景的优势

 4.6.3 浏览器兼容性

 4.6.4 实战体验：制作花边框

 4.7 本章小结

 第5章 CSS3文本

 5.1 CSS3文本简介

 5.2 CSS3文本阴影属性

 5.2.1 text-shadow属性的语法及参数

 5.2.2 浏览器兼容性

 5.2.3 实战体验：制作立体文本

 5.3 CSS3溢出文本属性

 5.3.1 text-overflow属性的语法及参数

 5.3.2 浏览器兼容性

 5.3.3 text-overflow属性使用方法

 5.3.4 实战体验：制作固定区域的博客列表

 5.4 CSS3文本换行

 5.4.1 word-wrap属性

 5.4.2 word-break属性

 5.4.3 white-space属性5.4.4 文本换行技巧

 5.4.5 文本换行技术对比

 5.5 本章小结

 第6章 CSS3颜色特性

 6.1 网页中的色彩特性

 6.1.1 网页色彩的表现原理

 6.1.2 Web页面的安全色

 6.1.3 色彩模式

 6.2 CSS3透明属性

 6.2.1 opacity属性的语法及参数

 6.2.2 opacity浏览器兼容性

 6.2.3 实战体验：制作透明过渡色块

 6.3 CSS3颜色模式

 6.3.1 RGBA颜色模式

 6.3.2 HSL颜色模式

 6.3.3 HSLA颜色模式

 6.3.4 RGBA和HSLA颜色模式之间的选择

 6.3.5 RGBAHSLA的IE兼容方案

 6.3.6 RGBAHSLA滤镜格式

 6.4 本章小结

 第7章 CSS3盒模型7.1 CSS盒模型简介

 7.1.1 什么是盒模型

 7.1.2 重置盒模型解析模式

 7.2 CSS3盒模型属性

 7.2.1 box-sizing属性的语法及参数

 7.2.2 浏览器兼容性

 7.2.3 实战体验：box-sizing拯救了布局

 7.3 CSS3内容溢出属性

 7.3.1 overflow-x和overflow-y属性的语法及参数

 7.3.2 浏览器兼容性

 7.4 CSS3自由缩放属性

 7.4.1 resize属性的语法及参数

 7.4.2 浏览器兼容性

 7.4.3 实战体验：修改文本域随意调整大小的功能

 7.5 CSS3外轮廓属性

 7.5.1 outline属性的语法及参数

 7.5.2 浏览器兼容性

 7.5.3 outline和border的对比

 7.5.4 实战体验：模仿边框效果

 7.6 本章小结

 第8章 CSS3伸缩布局盒模型8.1 Flexbox模型基础知识

 8.1.1 CSS中的布局模式

 8.1.2 Flexbox模型的功能

 8.1.3 Flexbox模型中的术语

 8.1.4 Flexbox模型规范状态

 8.1.5 Flexbox模型浏览器兼容性

 8.1.6 Flexbox模型语法变更

 8.2 旧版本Flexbox模型的基本使用

 8.2.1 伸缩容器设置display

 8.2.2 伸缩流方向box-orient

 8.2.3 布局顺序box-direction

 8.2.4 伸缩换行box-lines

 8.2.5 主轴对齐box-pack

 8.2.6 侧轴对齐box-align

 8.2.7 伸缩性box-flex

 8.2.8 显示顺序box-ordinal-group

 8.2.9 实战体验：box制作自适应的三列等高布局

 8.3 混合版本Flexbox模型的基本使用

 8.3.1 伸缩容器设置display

 8.3.2 伸缩流方向flex-direction

 8.3.3 伸缩换行flex-wrap8.3.4 伸缩流方向与换行flex-flow

 8.3.5 主轴对齐flex-pack

 8.3.6 侧轴对齐flex-align

 8.3.7 堆栈伸缩行flex-line-pack

 8.3.8 伸缩性flex

 8.3.9 显示顺序flex-order

 8.4 新版本Flexbox模型的基本使用

 8.4.1 伸缩容器display

 8.4.2 伸缩流方向flex-direction

 8.4.3 伸缩换行flex-wrap

 8.4.4 伸缩流方向与换行flex-flow

 8.4.5 主轴对齐justify-content

 8.4.6 侧轴对齐align-items和align-self

 8.4.7 堆栈伸缩行align-content

 8.4.8 伸缩性flex

 8.4.9 显示顺序order

 8.5 综合案例：跨浏览器的三列布局

 8.6 本章小结

 第9章 CSS3多列布局

 9.1 CSS3多列布局简介

 9.1.1 浏览器兼容性9.1.2 CSS3多列布局的属性

 9.2 CSS3多列布局基本属性

 9.2.1 columns属性的语法及参数

 9.2.2 浏览器兼容性

 9.2.3 实战体验：Web页面的多列布局

 9.3 CSS3多列布局列宽属性

 9.3.1 column-width属性的语法及参数

 9.3.2 实战体验：浏览器根据窗口宽度变化调整列数

 9.4 CSS3多列布局列数属性

 9.4.1 column-count属性的语法及参数

 9.4.2 实战体验：显示固定列数

 9.5 CSS3多列布局列间距属性

 9.5.1 column-gap属性的语法及参数

 9.5.2 实战体验：设置列间距

 9.6 CSS3多列布局列边框样式属性

 9.6.1 column-rule属性的语法及参数

 9.6.2 实战体验：设置列边框

 9.7 CSS3多列布局跨列属性

 9.7.1 column-span属性的语法及参数

 9.7.2 实战体验：文章标题跨列显示

 9.8 CSS3多列布局列高度属性9.9 本章小结

 第10章 CSS3渐变

 10.1 CSS3渐变简介

 10.1.1 什么是色标

 10.1.2 浏览器兼容性

 10.2 CSS3线性渐变

 10.2.1 CSS3线性渐变语法与参数

 10.2.2 CSS3线性渐变的基本用法

 10.2.3 自定义CSS3线性渐变

 10.2.4 实战体验：CSS3制作渐变按钮

 10.3 CSS3径向渐变

 10.3.1 CSS3径向渐变语法

 10.3.2 CSS3径向渐变的属性参数

 10.3.3 CSS3径向渐变的基本用法

 10.3.4 实战体验：CSS3径向渐变制作圆形图标按钮

 10.4 CSS3重复渐变

 10.4.1 CSS3重复线性渐变

 10.4.2 CSS3重复径向渐变

 10.4.3 实战体验：制作记事本纸张效果

 10.5 综合案例：CSS3渐变制作纹理背景

 10.6 本章小结第11章 CSS3变形

 11.1 CSS3变形简介

 11.1.1 CSS变形属性及函数

 11.1.2 浏览器兼容性

 11.2 CSS变形属性详解

 11.2.1 transform属性

 11.2.2 transform-origin属性

 11.2.3 transform-style属性

 11.2.4 perspective属性

 11.2.5 perspective-origin属性

 11.2.6 backface-visibility属性

 11.3 CSS3 2D变形

 11.3.1 2D位移

 11.3.2 2D缩放

 11.3.3 2D旋转

 11.3.4 2D倾斜

 11.3.5 2D矩阵

 11.4 CSS3 3D变形

 11.4.1 3D位移

 11.4.2 3D缩放

 11.4.3 3D旋转11.4.4 3D矩阵

 11.5 多重变形

 11.5.1 2D多重变形制作立方体

 11.5.2 3D多重变形制作立方体

 11.6 综合案例：3D变形制作产品信息展示

 11.7 本章小结

 第12章 CSS3过渡

 12.1 CSS3过渡简介

 12.1.1 如何创建简单的过渡

 12.1.2 浏览器兼容性

 12.1.3 CSS3过渡属性

 12.2 CSS3过渡子属性详解

 12.2.1 指定过渡属性transition-property

 12.2.2 指定过渡所需时间transition-duration

 12.2.3 指定过渡函数transition-timing-function

 12.2.4 指定过渡延迟时间transition-delay

 12.2.5 多个CSS3过渡效果

 12.3 CSS3触发过渡

 12.3.1 伪元素触发

 12.3.2 媒体查询触发

 12.3.3 JavaScript触发12.4 CSS3过渡技巧

 12.4.1 一个完整的过渡

 12.4.2 可过渡的属性

 12.4.3 优先的过渡属性

 12.4.4 过渡的开始和结束为auto

 12.4.5 隐式过渡

 12.4.6 开关状态的不同过渡方式

 12.4.7 几乎无限延迟的过渡

 12.4.8 通过硬件加速过渡更加流畅

 12.4.9 过渡和伪元素

 12.5 综合案例：纯CSS3制作CSS Dock导航效果

 12.6 本章小结

 第13章 CSS3动画

 13.1 CSS3动画简介

 13.1.1 浏览器兼容性

 13.1.2 CSS3动画属性

 13.2 关键帧

 13.2.1 @keyframes的作用

 13.2.2 @keyframes的语法

 13.2.3 浏览器兼容性

 13.3 CSS中为元素应用动画13.3.1 使用@keyframes声明动画

 13.3.2 调用@keyframes声明的动画

 13.4 CSS3动画子属性详解

 13.4.1 调用动画animation-name

 13.4.2 设置动画播放时间animation-duration

 13.4.3 设置动画播放方式animation-timing-function

 13.4.4 设置动画开始播放的时间animation-delay

 13.4.5 设置动画播放次数animation-iteration-count

 13.4.6 设置动画播放方向animation-direction

 13.4.7 设置动画的播放状态animation-play-state

 13.4.8 设置动画时间外属性animation-fill-mode

 13.5 综合案例：全屏Slidershow效果

 13.6 本章小结

 第14章媒体特性与Responsive设计

 14.1 媒体类型

 14.1.1 Media Type设备类型

 14.1.2 媒体类型引用方法

 14.2 媒体特性

 14.2.1 Media Query和CSS属性集合

 14.2.2 常用Media Query设备特性

 14.2.3 浏览器兼容性14.2.4 Media Query使用方法

 14.3 Responsive布局概念

 14.3.1 Responsive设计特点

 14.3.2 Responsive中的术语

 14.3.3 Responsive布局技巧

 14.3.4 meta标签

 14.4 本章小结

 第15章嵌入Web字体

 15.1 @font-face模块介绍

 15.1.1 浏览器兼容性

 15.1.2 @font-face语法

 15.1.3 使用字体图标的优势

 15.2 实现@font-face

 15.2.1 使用@font-face自定义字体

 15.2.2 声明字体来源

 15.2.3 创建各种字体

 15.2.4 调用字体

 15.3 综合案例：将图标转换成Web字体

 15.3.1 创建一个图标字体

 15.3.2 准备插图

 15.3.3 导入到IcoMoon15.3.4 从IcoMoon中导出字体

 15.3.5 下载字体文件

 15.3.6 调用字体

 15.4 本章小结前言

 为什么要写这本书

 CSS3是在CSS2.1基础上扩展而来，事实上，它还没有完全成熟。

 有些专家会告诉你，CSS3现在还用不上，甚至几年之后都不会有成熟

 的规范发布。

 目前为止CSS3还没有一套成熟的规范，其中的模块也在不断更

 新，特别是浏览器对CSS3特性的支持也在不断变化，同时没有足够的

 时间去学习和研究W3C官方文档和规范，致使我们学习CSS3变得更为

 复杂。

 为什么会选择这个时候编写这样一本图书呢？原因很简单。对于希

 望Web应用开发者而言，CSS3可以说是众望所归，这也是技术变更的硬

 性需求。在实际Web应用中新标准的采纳程度正在以令人目眩的速度不

 断地变更着，众多浏览器厂商也在不断加快对CSS3新特性的支持。在

 编写这本图书的过程中，我也被迫不断更新书中的浏览器支持表格。

 面对自己正在使用的浏览器，大多数用户并不真正了解其具备的功

 能有多强大。当然，他们在浏览器自动更新后可能会发现一些细微的界

 面变化。但他们可能不知道，新版的浏览器对哪些CSS3特性有所支持。

 本书的目标是帮助开发者更好地掌握CSS3的特性，并且将新技术

 运用到实际的开发当中，提高自己开发Web程序的水平。

 本书面向的读者

 ·有一定CSS3开发经验的前端工程师。

 本书能帮助你系统掌握CSS3的各项知识，提升技术水平和业务能

 力。

 ·从事CSS3开发的前端工程师。

 由于CSS3涵盖的新特性非常多，在开发过程中将本书作为速查手

 册，提高开发效率。

 ·前端开发爱好者。

 如果还不是一名前端工程师，但是对前端开发非常感兴趣，本书也

 能让你对最新的CSS标准和规范有一个系统和全面的认识，为学习前端

 知识打下基础。

 本书的特色本书最大的特色就是将CSS3特性按模块功能分类，通过理论、图

 解、实战的方式向大家阐释CSS3每个特性功能。

 ·内容全面、丰富、翔实。

 由浅到深地讲解了CSS3新特性的语法、特性以及使用技巧。本书

 涵盖了CSS3众多功能模块，如CSS3选择器特性、边框模块、文本模

 块、颜色模块、UI界面模块、CSS3动画模块、CSS新型盒模型以及CSS

 媒体查询、响应式设计等。

 ·图解方式，直观易懂。

 图解的方式是本写的最大特色之一，在描述每一个CSS3特性过程

 都配了生动的实战效果，甚至每一步骤都配有相应的效果图。就算是你

 对文字理解或者代码理解有所误差，实战效果图能辅助你更好地理解

 CSS3每个特性。

 ·案例丰富，实战性强。

 每个CSS3特性都配有实战体验，部分案例来自于实际开发之中。

 同时在每个知识点之后，还提供了综合案例。通过实践加强动手能力，更好地掌握CSS3中的每个知识点。

 动手实践才是掌握一门新技术最有效的途径。如果能在阅读本书的

 过程中逐一亲手实现这些案例，那么在以后的实际开发中自然就会具有相当强的动手能力了。

 本书的内容

 本书包括15章，通过实例来演示CSS3模块的新特性。

 第1章简单介绍什么是CSS3，CSS3的好处是什么，浏览器对CSS3

 的支持状况，以及CSS3带来什么新特性，并且引入渐进增强式的概

 念。通过对本章的学习，大家可以在一定的程度上知道一些CSS3的故

 事。

 第2章介绍CSS3选择器。选择器是CSS中的核心部分之一，本章先

 阐述CSS2的选择器，再引入CSS3新增的选择器。深入介绍了CSS3新增

 选择器的功能及其实用性，还有各浏览器的兼容性。

 第3章详细介绍CSS3在边框方面新增的功能特性，比如边框色、图

 片边框、边框圆角等，并与CSS2进行了对比。

 第4章介绍CSS3背景功能，着重阐述了多背景、背景尺寸、背景原

 点方面的使用，以让大家掌握如何使用CSS3背景功能的新特性。

 第5章介绍CSS3文本功能。以前大家在网页制作时，只是设置文本

 的颜色、字体、字号等。通过对CSS3文本功能的学习，大家还可以运

 用文本阴影、文本溢出、文本换行等功能。第6章介绍CSS3颜色特性。大家以前只有在设计软件中使用的颜色

 值现在都可以运用，如RGBA、HSL、HSLA、透明度等。

 第7章介绍CSS3基础盒模型与用户界面。盒模型是CSS的重中之

 重，CSS2盒模型功能只能实现一些基本功能，对于一些特殊的功能需

 要借助JavaScript来实现。而在CSS3中这一点将得到很大的改善，可以

 通过CSS3来直接实现一些特殊的功能。

 第8章介绍CSS3的弹性盒模型，给大家引入一种全新的布局概念，为大家的页面布局带来革命性的变化。

 第9章介绍CSS3多列布局。布局在Web中随处可见，多列布局在

 CSS2中都是依靠float或者inline-block来实现的，而这两个属性带来的局

 限性也是相当大的。CSS3多列布局将会弥补这些不足之处。

 第10章介绍CSS3渐变功能。渐变效果在Web中也是一种常见的效

 果，以前靠设计师制作图片来完成，不仅增加了设计师的工作量，在页

 面中的效果也带来过多的局限制，扩展性也相当差。CSS3渐变不再需

 要使用图片来代替这些特殊的效果。

 第11章介绍CSS3变形功能。这是一个全新的功能，在CSS2中要实

 现需要借助JavaScript。CSS3的变形功能可以直接使用样式实现如旋

 转、移位、扭曲、缩放等效果。第12章介绍CSS3过渡功能。大家在Web制作中，使过渡效果不再生

 硬，变得细腻、流畅。

 第13章介绍CSS3动画功能。

 第14章介绍Media Query与Responsive布局。随着移动设备和宽屏浏

 览器的普及，单一的设计不能满足Web页面的设计需求，此时CSS3的

 Media Query新特性中出现了一个新的布局概念——Responsive。本章中

 大家将体会到Media Query与Responsive布局的强大功能。

 第15章介绍嵌入Web字体。浏览器仅限于用户在其系统上安装的字

 体呈现文本。CSS3使用@font-face改变了这一格局。网站不再受限于少

 量字体，如Arial、Verdana、Times和Georgia等。

 如何阅读本书

 本书结构不是按层进式安排的，章节之间是按CSS3的模块分类，读者阅读本书时无须按照先后顺序进行，可以挑选自己喜欢的章节阅

 读。但如果按章节的编排顺序逐章阅读，会更系统、更全面地学习

 CSS3，从中获得最大受益。

 阅读本书的案例时，尽量不要照抄书中的代码，在理解案例的设

 计思路基础上，自己动手开发相似功能的应用，并创造出满足自己需求

 的功能，举一反三。本书中使用的约定

 本书案例已在主流浏览器上进行过测试了。分别是：Firefox 12.0、Google Chrome 19.0.1084.52、Safari 5.17、Opera 11.64、IE 9。

 同时在一些广泛使用的旧版本浏览器(如IE 8)上也做了测试。很

 多情况下，CSS3的效果也能体现在较低版本上，页面能保持正常阅

 读，而且效果也不会太差。对于每一个CSS3特性，将尽可能地为低版

 本浏览器寻求变通的备用方案，使之能兼容那些不被原生支持的浏览

 器。

 针对每个浏览器版本，我们会标注相对应的属性在哪个版本号中开

 始支持。一些CSS3特性需要添加相应浏览器的渲染引擎的前缀才会生

 效，我们将会在后面的章节中依次介绍各浏览器的渲染引擎的前缀名

 称，以及CSS3特性在对应浏览器下的写法。

 在阅读本书时有些约定，有必要在这里先说明。

 ·W3C表示万维网联盟(World Wide Web Consortium)，是制定

 Web官方标准和规范(如CSS3)的组织。

 ·初始值(即默认值)是用户不显式声明时元素所具有的属性值。

 需特别指明的是，属性是元素的本质，而不是用户自定义的属性。·IE 8及以下版本代表IE 8、IE 7和IE 6。

 ·Webkit引擎内核的浏览器是指Safari(包括移动版本和桌面版

 本)、Google Chrome和其他近期使用版本的Webkit页面渲染引擎的浏

 览器，其私有属性的前缀是-webkit-。

 ·Gecko引擎内核的浏览器是指Mozilla，常指的是Firefox浏览器，其

 私有属性的前端缀是-moz-。

 ·Presto引擎内核的浏览器是指Opera，其私有属性的前缀是-o-。

 ·KHTML引擎内核的浏览器是指Konqueror，其私有属性的前缀是-

 khtml-。

 ·Trident引擎内核的浏览器是指Internet Explorer，其私有属性的前缀

 是-ms-。

 ·在没有特别声明的情况下，本书所指的浏览器仅适用于Windows系

 统，不适用于Mac系统和移动端。

 ·偶尔会碰到“所有浏览器”这个说法，此时仅代表目前所有广泛使

 用的浏览器，而并非字面意义所涵盖的那些可能仅占零星市场份额的不

 知名的浏览器。

 ·“HTML”指HTML和XHTML这两种语言。·“CSS”指CSS2.1规范，除非特别声明。

 ·本书所有案例代码都是以HTML 5的DTD编写。但这仅仅表示使用

 短小精悍的HTML 5文档声明，还有更简洁的meta字

 符编码、style和script标签。没有使用任何HTML 5的新标签，比如

 section、header、nav和article，所以页面可以在IE 8及以下版本正常运

 行，可以在自己的页面里将其更换为喜欢的标签。所有示例也同样兼容

 HTML 4.01和XHTML 1.0。

 ·为了方便阅读，本书中的部分案例代码仅提供了CSS样式代码和局

 部HTML代码，所有CSS实例代码必须置于一个外部样式文件或HTML

 文档的标签内。

 ·由于CSS3技术还在不断的完善与更新中，建议根据本书提供的参

 考地址，获取有关CSS3最新信息与更新。

 勘误和支持

 由于作者的水平有限，编写时间仓促，书中难免会出现一些错误或

 者不准确的地方，恳请读者批评指正。为此，我特意创建了一个在线支

 持站点http:www.w3cplus.combook-comment.html。大家可以将书中的

 错误发布在页面的评论中，遇到任何问题，可以留言或者发送邮件到

 w3cplus@hotmail.com，我将尽量提供最满意的答案。大家还可以关注微信公众账号ednote进入“第三极社区”微社区与广大读者和本书作者互

 动。书中的全部源文件可以从华章网站(http:www.hzbook.com)下

 载，我也会将相应的功能及时更正。期待能够得到你们真挚反馈。

 致谢

 首先要感谢好友林小志，是他让我鼓起勇气开始写这本书，也是他

 一直督促我的进度，并一直鼓励我坚持到最后。同时感谢

 W3CPlus(http:www.w3cplus.com)社区的所有同学们一直以来对我的

 默默支持。

 感谢机械工业出版社的编辑杨福川给我这样一个机会，在一年多的

 时间中始终支持我的写作，你的鼓励和帮助引导我能顺利完成全部书

 稿。同时也要感谢白宇编辑辛苦的付出，帮助我修改书中不足。

 感谢我的爸爸、妈妈将我培养成人，并时时刻刻为我灌输着信心和

 力量!也要感谢我的弟弟，引导我进入这个行业，让我有机会从事喜欢

 的工作。感谢太太罗群英和儿子一直以来对我的支持，让我有一个安心

 写作的环境，并给我足够的信心去完成这本拙作。

 谨以此书献给我最亲爱的家人、朋友以及众多热爱W3CPlus社区的

 朋友们!第1章揭开CSS3的面纱

 如果关注前端方面的技术，那么对CSS一定不会陌生，你肯定听说

 过CSS3。在使用CSS3之前，应该对这个新一代样式表语言的来龙去脉

 有个基本了解。

 在本章中，你将知道CSS3与CSS2.1的区别，以及当前市面上主流

 浏览器、移动端浏览器对CSS3支持的情况。对于尚不完全支持CSS3的

 浏览器，将会为大家引入一个渐进增强的概念，用一些CSS方法来模拟

 CSS3的实现方法。最后给大家简单介绍一些CSS3引入的新特性及其未

 来的前景。1.1 什么是CSS3

 CSS3并不是一门新的语言。如果接触过CSS就知道，CSS是创建网

 页的另一个独立但并非不重要的一部分。CSS是种层叠样式表，是一种

 样式语言，用来告诉浏览器如何渲染你的Web页面。

 CSS3是CSS规范的最新版本，在CSS2.1的基础上增加了很多强大的

 新功能，以帮助开发人员解决一些问题，并且不再需要非语义标签、复

 杂的JavaScript脚本以及图片，例如圆角功能、多背景、透明度、阴影等

 功能等。CSS2.1是单一的规范，而CSS3被划分成几个模块组，每个模

 块组都有自己的规范。这样的好处是整个CSS3的规范发布不会因为部

 分难缠的部分而影响其他模块的推进

 [1]。

 现在先来看看CSS3激动人心的新特性。

 [1] 更详细的信息可参见http:www.w3.orgStyleCSScurrent-

 work.en.html，其中介绍了CSS3具体划分为多少个模块组、CSS3所有模

 块组目前所处的状态，以及将在什么时候发布。1.1.1 CSS3的新特性

 CSS3规范并不是独立的，它重复了CSS的部分内容，但在其基础上

 进行了很多的增补与修改。CSS3与之前的几个版本相比，其变化是革

 命性的，虽然它的部分属性还不能够被浏览器完美的支持，但却让我们

 看到网页样式发展的前景，让我们更具有方向感、使命感。

 CSS3新特性非常多，这里挑选一些被浏览器支持较为完美、更具

 实用性的新特性。

 1.强大的CSS3选择器

 使用过jQuery的人都知道，jQuery的选择器功能强大，使用方便，CSS3选择器和jQuery选择器非常类似。允许设计师通过选择器直接指定

 需要的HTML元素，而不需要在HTML中添加不必要的类名、ID等。使

 用CSS3选择器，能在Web的制作中更完美地做到结构与表现分离，设计

 师能轻松地设计出简洁、轻量级的Web页面，并且能更好地维护和修改

 样式。

 2.抛弃图片的视觉效果

 Web中最常见的效果包括圆角、阴影、渐变背景、半透明、图片边框等。而这样的视觉效果在CSS中都是依赖于设计师制作图片或者

 JavaScript脚本来实现的。CSS3的一些新特性可以用来创建一些特殊的

 视觉效果，后面的章节将为大家展现这些新特性是如何实现这些视觉效

 果。

 3.背景的变革

 如果说CSS中的背景给你带来太多的限制，那么CSS3将带来革命性

 的变化。CSS3不再局限于背景色、背景图像的运用，新特性中添加了

 多个新的属性值，例如background-origin、background-clip、background-

 size，此外，还可以在一个元素上设置多个背景图片。这样，如果要设

 计比较复杂的Web页面效果，就不再需要使用一些多余标签来辅助实现

 了。举个例子，要实现CSS中的滑动门效果，在CSS中基本上要添加2～

 3个额外的标签来辅助实现，那么CSS3中的这些新特性能够在一个标签

 中完成同等的效果。

 4.盒模型变化

 盒模型在CSS中是重中之重，CSS中的盒模型只能实现一些基本的

 功能，对于一些特殊的功能需要基于JavaScript来实现。而在CSS3中这

 一点得到了很大的改善，设计师可以直接通过CSS3来实现。例如，CSS3中的弹性盒子，这个属性将给大家引入一种全新的布局概念，能

 轻而易举实现各种布局，特别是在移动端的布局，它的功能更是强大。大家将在第7章、第8章见识它的神功。

 5.阴影效果

 阴影主要为分两种：文本阴影(text-shadow)和盒子阴影(box-

 shadow)。文本阴影在CSS中已经存在，但没有得到广泛的运用。CSS3

 延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器

 方案，使文本看起来更醒目。盒子阴影的实现在CSS中就有点苦不堪

 言，为了实现这样的效果，需要新增标签、图片，而且效果还不一定完

 美。CSS3的box-shadow将打破这种局面，可以轻易地为任何元素添加盒

 子阴影。

 6.多列布局与弹性盒模型布局

 CSS3引入了几个新的模块用于更方便地创建多列布局。

 “多列布局”(Multi-column Layout)模块描述了如何像报纸、杂志

 那样，把一个简单的区块拆分成多列，第9章为大家介绍这个模块的运

 用。“弹性盒模型布局”(Flexible Box Layout)模块能让区块在水平、垂

 直方向对齐，能让区块自适应屏幕大小，相对于CSS的浮动布局、inline-block布局、绝对定位布局来说，它显得更加方便与灵活。缺点

 是，这两个模块在一些浏览器中还不被支持，但随着技术的发展革新，这一刻终将到来。7.Web字体和Web Font图标

 浏览器对Web字体有诸多限制，Web Font图标对于设计师来说更奢

 侈。CSS3重新引入@font-face，对于设计师来说无疑是件好事。@font-

 face是链接服务器上字体的一种方式，这些嵌入的字体能变成浏览器的

 安全字体，不再担心用户没有这些字体而无法正常显示的问题，从此告

 别用图片代替特殊字体的设计时代。

 8.颜色与透明度

 CSS3颜色模块的引入，实现了制作Web效果时不再局限于RGB和

 十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模

 式。在Web设计中，能轻松实现某个颜色变得再亮一点或者再暗一点。

 其中HSLA和RGBA还增加了透明通道，能轻松地改变任何一个元素的

 透明度。另外，还可以使用opacity属性来制作元素的透明度。从此制作

 透明度不再依赖图片或者JavaScript脚本了。

 9.圆角与边框的新法

 圆角是CSS3中使用最多的一个属性，原因很简单：圆角比直线性

 更美观，而且不会与设计产生任何冲突。与CSS制作圆角不同之处是，CSS3无须添加任何标签元素与图片，也不需借用任何JavaScript脚本，一个属性就能搞定。对于边框，在CSS中仅局限与边框的线型、粗细、颜色的设置，如果需要特殊的边框效果，只能使用背景图片来模仿。

 CSS3的border-image属性使元素边框的样式变得丰富起来，还可以使用

 该属性实现类似background的效果，对边框进行扭曲、拉伸和平铺等。

 10.盒容器的变形

 在CSS时代，让某个元素变形是一个可望而不可及的想法，为了实

 现这样的效果，需要写大量的JavaScript代码。CSS3引进了一个变形属

 性，可以在2D或者3D空间里操作盒容器的位置和形状，例如旋转、扭

 曲、缩放或者移位。我们把这些效果称为“变形”，大家将在第11章体验

 这些新特性。

 11.CSS3过渡与动画交互效果

 CSS3的“过渡”(transition)特性能在Web制作中实现一些简单的动

 画效果，让某些效果变得更具流线性、平滑性。而CSS3“动

 画”(animation)特性能够实现更复杂的样式变化，以及一些交互效

 果，而不需要使用任何Flash或JavaScript脚本代码。

 12.媒体特性与Responsive布局

 CSS3的媒体特性可以实现一种响应式(Responsive)布局，使布局

 可以根据用户的显示终端或设备特征选择对应的样式文件，从而在不同的显示分辨率或设备下具有不同的布局渲染效果，特别是在移动端上的

 实现更是一种理想的做法。1.1.2 CSS3的发展状况

 通过对CSS3新特性的简单介绍，大家可能要问，这些超炫的特性

 什么时候才能成为标准并最终发布呢？其实CSS3的每一个模块都有它

 自己的更新(进度表)时间，如图1-1所示

 [1]

 ，大家可以从这个图上看

 到CSS3的当前发展的详细进度。图1-1 CSS3所有模块发展进度图1-1 (续)

 Web开发者希望在CSS3标准规范发布之前就能使用这些新特性，而

 它们的使用还受限于不同的浏览器，只有浏览器完全支持了，才能完全

 使用这些新特性。目前，CSS3还不是最终的标准，有很多浏览器支持不够完美，那

 么现在可以使用CSS3吗？

 [1] http:www.w3.orgStyleCSScurrent-work.en.html上的截图。还可以到

 地址http:meiert.comenindicescssproperties(CSS各属性查询表)查看

 各个CSS属性属于哪个CSS版本，以及各个属性对应的默认值，以便更

 清楚地知道哪些属性是在CSS基础上添加的。1.1.3 现在能使用CSS3吗

 从图1-1中可以看出，CSS3还在不断完善中，很多功能还处于草稿

 阶段，但部分模块进入了“候选推荐”状态，这说明在Web设计中完全可

 以使用这些模块。即使有一些模块还处于“工作草案状态”，也可以尝试

 着使用，只有不断将新的CSS技术运用到实际工作中，才能发现应用这

 些新技术所面临的真正挑战，以便W3C更好地完善它们，从而更好地、有效地促使它们成为真正的标准。

 你应该了解哪些可用，哪些还不能使用。换句话说，在实际工作开

 发中可以先运用相对稳定的CSS3特性，并确保不会对尚不支持这些特

 性的浏览器造成影响。做到明智的使用，而不是盲目地滥用CSS3新特

 性。1.1.4 使用CSS3有什么好处

 与CSS相比，使用CSS3有什么好处呢？最明显的就是CSS3能让页

 面看起来非常炫、非常酷，使网站设计锦上添花，但它的好处远远不止

 这些。在大多数情况下，使用CSS3不仅有利于开发与维护，还能提高

 网站的性能。与此同时，还能增加网站的可访问性、可用性，使网站能

 适配更多的设备，甚至还可以优化网站SEO，提高网站的搜索排名结

 果。下面介绍CSS3特有的好处。

 1.减少开发与维护成本

 为什么说CSS3能减少开发与维护的成本呢？先来看一个实例。一

 个圆角效果，在CSS中需要添加额外的HTML标签，使用一个或者更多

 图片来完成，而使用CSS3只需要一个标签、一个border-radius属性就能

 完成。这样，CSS3技术能把你从绘图、切图和优化图片的工作中解救

 出来。

 如果后续需要调整这个圆角的弧度或者圆角的颜色，使用CSS，要

 从头绘图、切图才能完成，而使用CSS3几秒就完成这些工作。

 CSS3还能使你远离一大堆的JavaScript脚本代码或者Flash，你不再

 需要花大把时间去写脚本或者寻找合适的脚本插件并修改以适配你的网站特效。

 最后，有些CSS3技术还能帮你对页面进行“减肥”，让结构更加“苗

 条”。你不用为了达到一个效果而嵌套很多DIV和类名，这样能有效地

 提高工作效率、减少开发时间、降低开发成本。例如，制作一个重叠的

 背景效果，在CSS中需要添加DIV标签和类名，在不同的DIV中放一张

 背景图，现在可以使用CSS3的多背景和背景尺寸等新特性，在一个DIV

 标签中完成这些工作。

 2.提高页面性能

 很多CSS3技术通过提供相同的视觉效果而成为图片的“替代品”，换

 句话说，在进行Web开发时，减少多余的标签嵌套，以及图片的使用数

 量，意味着用户要下载的内容将会更少，页面加载也会更快。另外，更

 少的图片、脚本和Flash文件让Web站点减少HTTP请求数，这是提升页

 面加载速度的最佳方法之一。而使用CSS3制作图形化网站无需任何图

 片，极大地减少HTTP的请求数量，并且提升页面的加载速度。当然，这取决于采用CSS3特性来代替什么技术，同样还要看如何使用CSS3特

 性。例如CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请

 求，但可能要求浏览器执行很多的工作来完成这个动画效果的渲染，这

 有可能导致浏览器响应缓慢，致使用户流失。因此，在使用一些复杂的

 特效时，大家需要考虑清楚。不过这样的现象毕竟为数不多。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能。就这一条足以让

 我们使用CSS3。1.2 浏览器对CSS3的支持状况

 CSS3给我们带来众多全新的设计体验，但有一个问题值得考虑

 ——浏览器对CSS3特性的支持情况如何？因为页面最终离不开浏览器

 来渲染，并不是所有浏览器都完全支持CSS3的特性。有时候花时间写

 的效果只能在特定的浏览器下有效，意味着只有部分用户能欣赏到，这

 样的工作变得没有什么意义。例如，使用CSS3制作背景仅在WebKit内

 核的浏览器下有效果。

 想知道用户能够体验到哪些CSS3的新特性，必须了解当前浏览器

 对CSS3特性的支持程度如何。1.2.1 经典回顾：图说浏览器大战

 “浏览器大战”一词在20世纪末产生，网景(Netscape)与微软展开

 了第一次互联网大战，结果是网景以失败告终，微软荣登冠军宝座。

 2004年11月Firefox 1.0诞生，浏览器开始了历史上的第二次大战，IE的地位受到了以Firefox为首的其他浏览器的挑战。2008年12月Google

 Chrome的诞生，向市场投放了一颗重磅炸弹。此时的IE也开始了版本的

 升级，虽然IE将版本更新到了IE 8，但面对Firefox和Google Chrome两个

 强劲的对手，其更新的步伐依然显得太慢，在2010年IE的市场份额跌至

 50%。而后，Chrome不断更新，其市场份额快速上升。2012年5月，终

 于夺得浏览器的霸主之位。

 这不是浏览器大战的结束，仅仅是IE时代在落幕而已。随着移动设

 备的风靡，移动版本Safari的市场份额在一年的时间里迅速增长。也

 许，第三次浏览器大战的战场并不在桌面领域，而是在移动领域。

 市面上浏览器品种繁多，从而引发浏览器的市场大战，这场战争持

 续了近二十年，但从未有结束战争的趋势。浏览器之争提示了Web浏览

 器的影响，比如Chrome和Firefox对浏览器霸主IE发起的挑战，随着移动

 终端的出现，另一个强有力的竞争者——移动Safari网络浏览器也加入

 这场无休止的浏览器之战。下面一起来看看monetate.com

 [1]

 绘制的浏览器战争图，如图1-2所示。图1-2 浏览器之争

 [1] 详情见http:monetate.cominfographicbrowser-wars-the-end-or-just-

 thebeginning。1.2.2 浏览器的市场份额

 图1-2所示只是主流浏览器的市场之争，国内还有许多国产的浏览

 器，例如QQ浏览器、奇虎360浏览器、移动端的UC浏览器等。用户在

 使用什么样的浏览器，这个使用率始终无法准确地掌握，因为这个概率

 始终都在变化，下面详细看看国内和全球浏览器的市场份额。

 1.浏览器国内市场份额

 首先关注国内浏览器的市场份额，一起来看百度统计的浏览器市场

 份额图，如图1-3所示。图1-3 国内浏览器市场份额

 国内浏览器市场位列三甲的分别是IE 6.0、奇虎360和IE 7.0，三个

 版本的浏览器流量份额占据总市场份额的61.1%左右，但IE 6～8在国内

 依然处于绝对领先态势，但相比两年前，IE浏览器在国内也步入下滑的

 态势，这给前端开发人员带来一丝的希望。更值得庆幸的是，360浏览

 器在5月发起了狙击IE 6浏览器的活动，并开始在最新版本的360安全浏

 览器中内置了IE 8内核，这无疑给国内的前端工程师带来了一丝清凉。2.浏览器全球市场份额

 2012年5月可以说是浏览器厂商激烈竞争的一个月，一度报出

 Google Chrome浏览器全球份额首次超越IE浏览器，夺得浏览器全球霸

 主之位。全球浏览器市场份额发生了哪些变化呢？首先看StatCounter的

 统计数据

 [1]

 ，如图1-4所示。

 图1-4中数据显示，在2012年5月，IE浏览器已失去了浏览器的霸主

 之位，被Chrome取代，Firefox也在市场上位居第三。如果将其他版本的

 Firefox、Chrome、Safari和Opera加在一起计算，IE所占的市场份额确实

 已少于这些符合标准的现代浏览器。通常，我在自己站点上发布一个新

 的CSS3技巧时，很多朋友会问：“它在IE浏览器上能运行吗？效果又是

 什么样？”根据图1-4的显示结构，是不是应该换一种思维，是不是询

 问“这个效果在Firefox上看起来怎么样”更有意义呢？

 那么是不是可以忽略IE呢？其实不然，IE虽然在全球市场份额不再

 是霸主，但在国内它依然是主流，特别是IE 6依然占有半壁江山，这也

 致使我们不能不考虑使用IE的用户群。图1-4 主流浏览器市场份额(2012年1月～2012年6月)

 制作一个网站，其内容应该在任何浏览器上都是可用的，不应该忽

 略或抛弃某些用户。虽然制作一个令人满意的Web页面不是一件难事，但是为了一个渐渐消失的用户群体花费大量的时间与成本确实不是一个

 明智之举。

 正如前面所讲，CSS3对网站意义何在，应该是由用户群体来确

 定，而不是由浏览器的市场份额所决定。换而言之，除非网站统计结果

 与这个结果有很大的出入，否则就不应该继续认为非IE用户仅仅是个不

 需要特别关注的边缘化群体。在非IE浏览器与IE浏览器上花费的时间同

 样重要。而CSS3能很容易地让网站在非IE浏览器下更棒，而且少数情

 况之下这些CSS3属性也适合IE浏览器。[1] 想了解其他来源的统计结果，可以访问维基百科的“Usage share of

 web browsers”页面

 (http:en.wikipedia.orgwikiUsage_share_of_web_browsers)。1.2.3 主流浏览器对CSS3支持状况

 幸运的是，CSS3特性大部分都已经有了很好的浏览器支持度(后

 面在讲每个CSS3特性之时，会列出各浏览器对其支持情况)。各大主

 流浏览器对CSS3的支持越来越完善，曾经让多少前端开发人员心碎的

 IE也开始挺进CSS3标准行列。当然，即使CSS3标准制定完成，现代浏

 览器要普及到大部分用户也是一个相当漫长的过程。如果现在就要使用

 CSS3来美化你的站点，有必要对各大主流浏览器对其新技术的支持情

 况有一个全面的了解。

 本节分别在Mac和Windows两个平台介绍Chrome、Firefox、Safari、Opera和IE五大主流浏览器对CSS3新特性和CSS3选择器的支持情况。

 1.主流浏览器对CSS3属性的支持状况

 图1-5所示是findmebyIP

 [1]

 为五大主流浏览器对CSS3属性支持状况

 的统计图。

 从图中可以看出，CSS3中的Overflow Scrolling属性还没有浏览器支

 持，其他属性在Mac系统下，Chrome、Safari都支持，其次支持较好的

 是Firefox和Opera。而在Windows系统下，WebKit内核浏览器表现的非

 常优秀，其次是Firefox和Opera。同时IE也迎头追赶，在IE 9中支持部分CSS3特性。据说，IE 10将会更完美地支持CSS3。图1-5 主流浏览器对CSS3属性支持状况

 2.主浏览浏览器对CSS3选择器的支持状况图1-6所示是findmebyIP

 [1]

 为五大主流浏览器对CSS3选择器的支持

 状况统计图。值得高兴的是，图中除了IE 6～8有“×”之外，其他浏览器

 都是“√”，全部支持CSS3选择器。

 从图1-5和图1-6中可以清楚地知道，无论是在Mac系统下还是在

 Windows系统下，Google Chrome和Safari对CSS3特性的支持度是最好

 的，而IE系列是最差的，特别是IE 6～8。原因很简单，IE 6～8发布于

 CSS3完善之前。

 差别各异的浏览器致使页面在不同的浏览器之中渲染并不一致。特

 别是在当今这个信息发达的时代，设备、屏幕、浏览器的形态越来越丰

 富，人们的习惯设置也不尽相同，因此想再创造一个在任何地方都表现

 一致的页面就更加的不可能。只要你关注如何提供实用、易用、好用的

 页面，这点表面上的差异就显得不重要。而这种想法就是接下来要介绍

 的“渐进增强”。图1-6 主流浏览器对CSS3选择器的支持状况

 [1] 详情见http:fmbip.comlitmus。

 [2] 详情见http:fmbip.comlitmus。1.3 渐进增强

 第一次听到“渐进增强”(Progressive Enhancement)一词是在前端

 重构交流会上。渐进增强并不是一种技术，而是一种开发的方式，更是

 一种Web设计理念。首先思考一个问题：“网站是否需要在每个浏览器

 中看起来都一样？”带着这个问题来看渐进增强。1.3.1 渐进增强与优雅降级

 正如前面所言，渐进增强是一种开发方式，更是一种设计理念。在

 编写Web页面时，首先保证最核心的功能实现，让任何低端的浏览器都

 能看到站点内容，然后考虑使用高级但非必要的CSS和JavaScript等增强

 功能，为当前和未来的浏览器提供更好的支持，给用户带来更好的体

 验。

 在设计的时候，先考虑低端设备用户能否看到所有内容，然后在此

 基础之上为高端用户进行设计。不仅为高端设备用户提供一个完美的应

 用，也要为不同性能级别设备的用户设计不同级别的不那么完美的应

 用。这称为“优雅降级”。

 目前而言，虽对“渐进增强”有所了解的人很多，但是要说普及或深

 入还远远没到时候。在大家平时的设计思维中有一种极强的固定思维，也就是想让网站在各个浏览器下表现一致。这种出发点本身并没有什么

 问题，但是这样会让领先的浏览器的优势无法充分显示出来。

 因此，从今天开始要改变制作Web站点的思维，让网站能优雅降

 级，目标应该是——向尽可能多的用户提供尽可能优质的用户体验。这

 跟用户访问网站使用方式无关，无论通过iPhone、高端的桌面系统、Kindle，还是阅读器，用户都能得到尽可能独特且完美的体验。1.3.2 渐进增强的优点

 “向尽可能多的用户提供尽可能优质的用户体验”这一目标听起来相

 当不错。有的人制作Web站点时报怨，IE怎样才具有CSS3的效果。诚

 然，我们不使用渐进增强也可以实现，如为一些旧浏览器提供一套兼容

 方案，确保页面与现代浏览器保持一致。简单来说就是在支持CSS3的

 浏览器中使用CSS3特性，在不支持的浏览器中另写一套样式来模拟

 CSS3效果，实现让网站在所有浏览器都一样。

 可以说，通过这种方法只是让低版本的浏览器渲染页面更好看一

 点，并没有得到实质性的提高。

 因此，如果网站始终无法做到一模一样，为什么不使用CSS3技术

 使它在现代浏览器上看起来更靓丽呢？当然，某些CSS3特性在不支持

 的浏览器中是“无法模拟”的，但使用渐进增强，就无须为了让网站适合

 所有人而放弃这些技术。

 CSS的渐进增强有别于CSS的hack。hack是浏览器厂商的一种手

 法，用来增强自己的竞争，而渐进增强起到锦上添花之效。所以前者应

 该尽量避免使用，而后者应该适当使用。

 就样式而言，渐进增强的对象是一些现代浏览器，渐进增强的一些属性主要是CSS3的一些特性，或是IE低级版本不支持的一些属性，或

 是其他一些特殊情况。淘宝网上的一个例子如图1-7所示。

 这里采用了CSS3的旋转特性transform，鼠标移上去时，三角会实现

 旋转的动画效果，并改变方向。之前，要实现图1-7所示的旋转效果，需要一大串JavaScript脚本。而使用transform仅仅需要几行代码。

 site-nave .menu:hover .menu-hd {

 -webkit-transform: rotate(180deg);

 -webkit-transform-origin-x:50%;

 -webkit-transform-origin-y:30%;

 -moz-transform: rotate(180deg);

 -moz-transform-origin-x:50%;

 -moz-transform-origin-y:30%;

 -o-transform: rotate(180deg);

 -o-transform-origin-x:50%;

 -o-transform-origin-y:30%;

 -ms-transform: rotate(180deg);

 -ms-transform-origin-x:50%;

 -ms-transform-origin-y:30%;

 transform:rotate(180deg);

 transform-origin-x: 50%;

 transform-origin-y: 30%;

 }图1-7 渐进增强制作旋转三角

 采用渐进增强能给现代浏览器用户一个更好的体验，在不支持

 CSS3的IE浏览器也能正常使用，只不过体验会大打折扣。

 以上只是一个简单的例子，本书后面还会介绍CSS3渐进增强的案

 例，例如text-shadow文字阴影、border-radius圆角属性、box-shadow盒阴

 影属性、CSS3渐变背景和CSS3选择器等。1.4 CSS3的现状及未来

 了解到使用CSS3会带来很多好处，哪些网站在使用CSS3？这很容

 易，打开计算机随处可见。既然这样，就一起来看几个网站吧。1.4.1 谁在使用CSS3

 首先看看新浪微博

 [1]

 ，其中最明显的是圆角的应用，在发表评论

 的地方还使用了内阴影属性，如图1-8所示。

 图1-8 新浪微博

 Google的UI也使用了大量CSS3特性，看主版面的Button效果，这个按钮使用了CSS3的阴影、圆角和渐变三种属性，如图1-9所示。

 图1-9 Google的按钮效果

 接下来介绍的Twitter网站(http:twitter.com)可以说把CSS3运用得

 出神入化，登录界面如图1-10所示。图1-10 Twitter登录界面

 整个界面都是使用CSS3完成的，没有使用任何图片、背景渐变、圆角、文本框发光效果等。这些都是CSS3特性的一气呵成，这不得不

 让我们为CSS3强大的特性折服。

 国内外使用CSS3特性制作网站的案例越来越多，特别是一些优秀

 的个人站点，更是运用得出神入化。

 [1] 网页地址为http:weibo.com311290005。1.4.2 CSS3的未来

 CSS3无疑对Web前端开发带来质的飞跃。虽然目前CSS3还没有完

 全普及，而且浏览器也不完全支持，但对于我们积极地去学习和实践并

 不矛盾，掌握和学习CSS3将是大势所趋。CSS3将是引导我们进入编写

 网页精彩世界的先驱技术。开发人员能够更轻松地创建功能强大、易于

 维护网站。

 随着旧版浏览器所占市场份额逐渐减少，学习CSS3技术将更有价

 值。这是作为一位优秀前端开发人员所必须掌握的技术之一，也是前端

 开发人员的大势所趋。

 当然，学习一门新技术不能跟风，需要理性思考，这种理性思考并

 不表示对新技术的畏缩，同时也应该明白学习新技术可能会遇到的困难

 和风险。只有这样，才能更好地驾驭CSS3。1.5 本章小结

 本章主要介绍了什么是CSS3、CSS3的发展状况、新特性，以及浏

 览器对CSS3的支持状况；同时，引进了渐进增强的设计理念。通过本

 章的学习，可以对CSS3有一个初步的了解。学习CSS3的好处有很多，它能让你始终处于Web设计的前沿，增加你的职业技能和竞争力，还能

 帮助你缩短与顶级设计师或开发者的距离。马上开始使用，然后不断磨

 砺你的技巧并在职业的道路上不断前进。第2章 CSS3选择器

 W3C在CSS3的工作草案中把选择器独立出来成为一个模块

 [1]。实

 际上，选择器是CSS知识中的重要部分之一，也是CSS的根基。利用

 CSS选择器能不改动HTML结构，通过添加不同的CSS规则得到不同样

 式的网页。

 [1] 详情参考http:www.w3.orgTRcss3-selectors。2.1 认识CSS选择器

 要使某个样式应用于特定的HTML元素，首先需要找到该元素。在

 CSS中，执行这一任务的表现规则称为CSS选择器。它为获取目标元素

 之后施加样式提供了极大的灵活性。实际上，CSS2.1已经为大家提供了

 很多常用的选择器，基本能够满足Web设计师常规的设计需求。2.1.1 CSS3选择器的优势

 既然CSS选择器能满足Web常规的设计需求，CSS3选择器有什么优

 势呢？CSS3选择器不但支持所有CSS选择器，同时新增了独有的选择

 器，对拥有一定CSS基础的开发人员来说，学习CSS3选择器是件非常容

 易的事。

 CSS3选择器在常规选择器的基础上新增了属性选择器、伪类选择

 器、过滤选择器。可以帮助您在开发中减少对HTML类名或ID名的依

 赖，以及对HTML元素的结构依赖，使编写代码更加简单轻松。如果学

 习过jQuery选择器，学习CSS3选择器会更容易，因为CSS3选择器在某

 些方面和jQuery选择器是完全一样的，唯一遗憾的是部分旧版本浏览器

 并不支持CSS3新增的部分选择器。下面一起来体验CSS3选择器。2.1.2 CSS3选择器分类

 根据所获取页面中元素的不同，把CSS3选择器分为五大类：基本

 选择器、层次选择器、伪类选择器、伪元素和属性选择器。其中，伪类

 选择器又分为六种：动态伪类选择器、目标伪类选择器、语言伪类、UI

 元素状态伪类选择器，结构伪类选择器和否定伪类选择器，如图2-1所

 示。

 图2-1 CSS3选择器分类

 下面分别介绍这十种选择器。2.2 基本选择器

 基本选择器是CSS中使用最频繁、最基础，也是CSS中最早定义的

 选择器，这部分选择器在CSS1中就定义了，为了便于初学者温故而知

 新，不妨回顾CSS的基础选择器。2.2.1 基本选择器语法

 通过基本选择器可以确定HTML树形结构中大多数的DOM元素节

 点。其详细说明如表2-1所示。

 表2-1 基本选择器语法2.2.2 浏览器兼容性

 浏览器兼容性如表2-2所示。从表中可以看出，浏览器对基本选择

 器都是一路绿灯通行，大家可以放心使用。

 表2-2 基本选择器的浏览器兼容性2.2.3 实战体验：使用基本选择器

 下面通过示例介绍各种基本选择器在页面中的使用方法。

 页面中有一个列表，其中第一个和最后一个设置了ID属性，其中部

 分列表项设置了class类名，通过基本选择器来改变元素的样式风格。

 新创建一个HTML文件2-1.html，加入以下代码。









 使用CSS3 基本选择器<title> <style type=textcss> {margin: 0;padding:0;} .clearfix:after,.clearfix:before{display:table;content:} .clearfix:after{clear:both;overflow:hidden} .demo { width: 250px; border: 1px solid ccc; padding: 10px;margin: 20px auto} li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: f36; color: green; margin-right: 5px; }<style><head> <body> <ul class=clearfix demo> <li class=first id=first>1<li> <li class=active>2<li> <li class=important item>3<li> <li class=important>4<li> <li class=item>5<li> <li>6<li> <li>7<li> <li>8<li> <li>9<li> <li class=last id=last>10<li><ul><body><html> 上面代码使用了基本选择器，首先看看页面的初步效果(背景为粉 红色)，如图2-2所示。 ☆图2-2 页面初步效果 [1] 下面通过图解的方法说明CSS3基本选择器的使用方法。 [1] 有☆号的图示附有彩色图，后同。2.2.4 通配选择器 通配选择器()用来选择所有元素，当然也可以选择某个元素下 的所有元素。如： {margin: 0;padding:0 } 上面一行代码大家在Reset样式文件中经常看到，表示所有元素的 margin和padding都设置为0。为了更好地说明问题，通过CSS3选择器中 的通配选择器来改变列表中所有子项的背景色设置为orange。 {margin: 0;padding:0;} .clearfix:after,.clearfix:before{display:table;content:} .clearfix:after{clear:both;overflow:hidden} .demo { width: 250px; border: 1px solid ccc; padding: 10px;margin: 20px auto} li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: f36; color: green; margin-right: 5px; } .demo {background: orange} 此时元素类名为demo下的所有元素都将背景色设置为橙色，如图2- 3所示。 ☆图2-3 通配选择器使用效果2.2.5 元素选择器 元素选择器(E)是CSS选择器中最常见、最基本的选择器。文档 的元素包括html、body、p、iv等，如示例中ul、li也属于HTML元素。 接下来通过ul元素选择器改变整个列表的背景色。 {margin: 0;padding:0;} .clearfix:after,.clearfix:before{display:table;content:} .clearfix:after{clear:both;overflow:hidden} .demo { width: 250px; border: 1px solid ccc; padding: 10px;margin: 20px auto} li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: f36; color: green; margin-right: 5px; } .demo {background: orange} ul {background:grey} 此时列表ul的背景色将变成灰色，如图2-4所示。 ☆图2-4 元素选择器使用效果2.2.6 ID选择器 在使用ID选择器(id)之前，需要在HTML文档中给对应的元素设 置id属性并设置其值，才能找到对应的元素。ID选择器具有唯一性，在 一个页面中不会同时出现id相同的属性值。在CSS样式中使用id选择器 时，需要在id属性值的前面加上“”号，如(id)。在下面这个示例 中，可以轻松地看到列表中的第一项和最后一项分别定义了一个id，其 值分别为“first”和“last”。使用这两个id值来改变列表项中第一个和最后 一个列表项的背景色和前景色，代码如下。 {margin: 0;padding:0;} .clearfix:after,.clearfix:before{display:table;content:} .clearfix:after{clear:both;overflow:hidden} .demo { width: 250px; border: 1px solid ccc; padding: 10px;margin: 20px auto} li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: f36; color: green; margin-right: 5px; } .demo {background: orange} ul {background:grey} first{background:lime;color:000} last {background:000;color:lime} 页面效果如图2-5所示。 ☆图2-5 ID选择器使用效果2.2.7 类选择器 类选择器(.class)是以独立于文档元素的方式来指定元素样式。使 用方法与ID选择器极其相似，首先在HTML给需要的元素定义class属 性，并为其设置属性值。其与ID选择器有一个很大不同之处。“类选择 器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面 中是唯一的一个 ”。同样，看看如何通过类选择器来改变元素的样式。 {margin: 0;padding:0;} .clearfix:after,.clearfix:before{display:table;content:} .clearfix:after{clear:both;overflow:hidden} .demo { width: 250px; border: 1px solid ccc; padding: 10px;margin: 20px auto} li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: f36; color: green; margin-right: 5px; } .demo {background: orange} ul {background:grey} first{background:lime;color:000} last {background:000;color:lime} .item {background: green;color: fff;font-weight:bold} 页面效果就变成图2-6所示的风格了。 ☆图2-6 类选择器使用效果 上面是类选择器的简单使用，其实类选择器还有一种使用方法，就是多类选择器。通过两个或两个以上类选择器合并，来定义有别于一个 类名的元素效果。 {margin: 0;padding:0;} .clearfix:after,.clearfix:before{display:table;content:} .clearfix:after{clear:both;overflow:hidden} .demo { width: 250px; border: 1px solid ccc; padding: 10px;margin: 20px auto} li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: f36; color: green; margin-right: 5px; } .demo {background: orange} ul {background:grey} first{background:lime;color:000} last {background:000;color:lime} .item {background: green;color: fff;font-weight:bold} .item.important {background:red;} 使用多类选择器时，大家需要注意，如果一个多类选择器包含的类 名中其中有一个不存在，这个选择器将无法找到相匹配的元素，正如上 面的代码，其只能匹配li元素同时具有“item”和“important”的元素，而只 有其中任何一个类名都将无法匹配，如图2-7所示。 ☆图2-7 多类名选择器使用效果 注意 IE 6选择器并不支持多类名选择器，其将以末尾类名为准，大家使用时千万小心。 由于类名在一个HTML文档中可以同时存在于不同的元素标签上。 换句话说，在一个HTML文档中，div可以有类名“block”，ul也可以有类 名“block”，但有时在Web的页面开发中，仅需要对ul为“block”定义样 式，此时仅采用类名选择器并不能达到需要的效果，其实CSS选择器还 支持带有标签的类名选择器“ul.block”。 ul.block{background:ccc;} 上面的代码只匹配class属性包含“block”的所有ul元素，但其他任何 类型的元素都不匹配，包括有“blcok”类名的元素。简而言 之，“ul.block”只会匹配ul元素，并且有一个类名“block”。不符合这两个 条件的任何一个都不能与选择器匹配。2.2.8 群组选择器 群组选择器(selector1,selectorN)是将具有相同样式的元素分组在 一起，每个选择器之间用逗号(，)隔开，例如“selector1,selector2,…,selectorN”。这个逗号告诉浏览器，规则中包含多个不同的选择器，省去逗号就成了后代选择器，这一点大家在使用中千万要小心。 注意 “selector1,selectorN”是群组选择器，表示选择匹配为 selector1和selectorN的所有元素；“selector1 selectorN”是后代选择器(后 面介绍)，表示选择器selectorN所有元素为selector1的后代元素。2.3 层次选择器 层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要 的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中 某类关系可以方便快捷地选定需要的元素。2.3.1 层次选择器语法 层次选择器是一个非常好的选择器，也是大家常用的选择器，其详 细说明如表2-3所示。 表2-3 层次选择器语法2.3.2 浏览器兼容性 浏览器的兼容性如表2-4所示。从表中可以看出，子选择器、相邻 兄弟选择器和通用兄弟选择器要IE 7以及其以上版本才支持，随着IE 6 的慢慢消失，层次选择可以放心使用。 表2-4 层次选择器的浏览器兼容性2.3.3 实战体验：使用层次选择器选择元素 在层次选择器中，后代选择器与子选择器是比较常用的，而对于相 邻兄弟选择器和通用兄弟选择器而言，平时大家并不常使用，特别是 CSS3选择器中新增的通用兄弟选择器。下面通过示例来演示各种层次 选择器在页面中如何选择HTML的DOM元素的方法。 页面中有10个div元素，其中第四个div中包含了2个div，另外第七 个div包含了第八个，而第八个div又包含了第九个div，并且第九个div包 含了第十个div。下面通过层次选择器来改变div的样式风格。 新创建一个HTML文件2-2.html，代码如下。 <!DOCTYPE HTML> <html lang=en-US> <head> <meta charset=UTF-8> <title> 使用CSS3 层次选择器<title> <style type=textcss> {margin: 0;padding:0;} body {width: 300px;margin: 0 auto;} div{margin:5px;padding:5px;border: 1px solid ccc;}<style><head> <body> <div>1<div> <div>2<div> <div>3<div> <div>4 <div>5<div> <div>6<div><div> <div>7 <div>8 <div>9 <div>10<div><div><div><div><body><html> 在具体使用层选择器之前，先来看看页面的初步效果，如图2-8所 示。图2-8 页面初步效果 为了更好地理清这些div的层次关系，可以先将示例中的body部分 画一个DOM树形草图，如图2-9所示。 图2-9 body的树形结构2.3.4 后代选择器 后代选择器(E F)也称为包含选择器，作用就是可以选择某元素 的后代元素。例如“E F”，E为祖先元素，F为后代元素，表达的意思就 是选择E元素的所有后代F元素。这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系，都将被选中。换句话说，不论F在E中有 多少层级关系，F元素都将被选中。接下来使用后代选择器来改变其背 景色。 {margin: 0;padding:0;} body {width: 300px;margin: 0 auto;} div{margin:5px;padding:5px;border: 1px solid ccc;} div div {background: orange;} 一起来看使用后代选择器改变了哪几个div的背景色，如图2-10所 示。图2-10 使用后代选择器的效果 注意后代选择器两选择符之间必须以空格隔开，中间不能有 任何其他符号插入。2.3.5 子选择器 子选择器(E>F)只能选择某元素的子元素，其中E为父元素，而F 为子元素，其中E>F表示选择了E元素下所有子元素F。这与后代选择器 (E F)不一样，在后代选择器中F是E的后代元素，而在E>F中F仅仅是 E的子元素而已。接下来通过例子，选择器改变body下的子元素div的背 景色。 {margin: 0;padding:0;} body {width: 300px;margin: 0 auto;} div{margin:5px;padding:5px;border: 1px solid ccc;} div div {background: orange;} body > div {background: green;} 通过上面子选择器的运用，你能猜出body的10个div中，哪几个背 景色将变成绿色呢？来看图2-11的效果。图2-11 使用子选择器的效果2.3.6 相邻兄弟选择器 相邻兄弟选择器(E+F)可以选择紧接在另一个元素后的元素，它 们具有一个相同的父元素。换句话说，E和F是同辈元素，F元素在E元 素后面，并且相邻，这样就可以使用相邻兄弟选择器来选择F元素。 <!DOCTYPE HTML> <html lang=en-US> <head> <meta charset=UTF-8> <title> 使用CSS3 层次选择器<title> <style type=textcss> {margin: 0;padding:0;} body {width: 300px;margin: 0 auto;} div{margin:5px;padding:5px;border: 1px solid ccc;} div div {background: orange;} body > div {background: green;} .active + div {background: lime;}<style><head> <body> <div class=active>1<div>  <div>2<div> <div>3<div> <div>4 <div>5<div> <div>6<div><div> <div>7 <div>8 <div>9 <div>10<div><div><div> <div><body><html> 此时第二个div的背景色将变成“lime”色，如图2-12所示。 图2-12 使用相邻兄弟选择器效果2.3.7 通用兄弟选择器 通用兄弟选择器(E～F)是CSS3新增加的，用于选择某元素后面 的所有兄弟元素，它们和相邻兄弟选择器类似，需要在同一个父元素之 中。也就是说，E和F元素都是同辈元素，并且F元素在E元素之后，E～ F将选中E元素后面的所有F元素。如下面的代码所示。 {margin: 0;padding:0;} body {width: 300px;margin: 0 auto;} div{margin:5px;padding:5px;border: 1px solid ccc;} div div {background: orange;} body > div {background: green;} .active + div {background: lime;} .active ～ div {background: red;} 这样，只要是div.active的兄弟元素div，并且在div.active之后，其背 景色将变成红色，如图2-13所示。☆图2-13 使用通用兄弟选择器效果 注意通用兄弟选择器选中的是与E元素相邻的后面兄弟元素 F，其选中的是一个或多个元素；而相邻兄弟选择器选中的仅是与E元素 相邻并且紧挨的兄弟元素F，其选中的仅是一个元素。2.4 动态伪类选择器 伪类选择器对于大家来说最熟悉的莫过 于“:link”、“:visited”、“:hover”、“:active”，因为这些是大家平时常用到 的伪类选择器。而CSS3的伪类选择器可以分成六种：动态伪类选择 器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类 选择器和否定伪类选择器。 伪类选择器语法书写时和其他的CSS选择器写法有所区别，都以冒 号(：)开头。例如： E:pseudo-class {property:value} 其中E为HTML中的元素；pseudo-class是CSS的伪类选择器名称； property是CSS的属性；value为CSS属性值。 CSS3伪类选择器有什么功能？选定元素能带来什么便利？带着这 些问题，依次学习CSS3伪类选择器的使用方法，首先是动态伪类选择 器。2.4.1 动态伪类选择器语法 动态伪类早在CSS中就有，其并不是CSS3才有的，动态伪类并不存 在于HTML中，只有当用户和网站交互的时候才能体现出来。动态伪类 包含两种，第一种是在链接中常看到的锚点伪类，另一种为用户行为伪 类。其详细说明如表2-5所示。 表2-5 动态伪类选择器语法 注意锚点伪类的设置必须遵守一个“爱恨原则”LoVeHAte，也就是“link-visited-hover-active”。另外，在IE 6、IE 7(Q)、IE 8(Q)中，a:hover、a:active和a:visited并没有按照规范描述的算法来计算它们的针 对性，而是根据链接的实际状态来决定使用哪个规则集里的声明。它们 三个的针对性比a:link强，详细参阅http:www.w3help.orgzh- cncausesRS3005。2.4.2 浏览器兼容性 浏览器兼容性如表2-6所示。 表2-6 动态伪类选择器浏览器兼容性 注意 E:hover在IE 6浏览器中仅支持链接锚点a:hover。2.4.3 实战体验：美化按钮 在众多网站上按钮在不同状态下效果不一，用以增强用户体验，这 也是一种非常好的设计体验与细节。实现并不复杂，下面一起来看 Twitter的Bootstrap [1] 如何美化按钮。 实现页面中按钮在不同行为状态下的样式风格，常见的行为状态如 默认状态、悬浮状态、用户点击时状态和按钮获得焦点状态。 通过Twitter的Bootstrap制作的按钮效果如图2-14所示。 ☆图2-14 美化按钮效果 根据用户的行为不同，按钮效果可以分为：默认状态、悬浮状态、点击时状态、焦点状态和点击后状态，可以按照CSS3的动态伪选择器，在不同状态下给按钮赋予不同的样式风格。 根据这一设计思路，可以轻松美化按钮，看下面的示例代码，演示 的效果如图2-14所示。 <!DOCTYPE HTML> <html lang=en-US> <head> <meta charset=UTF-8> <title> 使用动态伪类选择器美化按钮<title> <style type=textcss> .download-info { text-align: center; } 默认状态下的按钮效果 .btn { background-color: 0074cc; background-color: 0055cc; CSS3 渐变制作背景图片 background-image: -ms-linear-gradient(top, 0088cc, 0055cc); background-image: -webkit-gradient(linear, 0 0, 0 100%,from(0088cc), to(0055cc)); background-image: -webkit-linear-gradient(top, 0088cc, 0055cc); background-image: -o-linear-gradient(top, 0088cc, 0055cc); background-image: -moz-linear-gradient(top, 0088cc, 0055cc); background-image: linear-gradient(top, 0088cc, 0055cc); background-repeat: repeat-x; display: inline-block; display: inline; border: 1px solid cccccc; border: 0; border-color: ccc; CSS3 的色彩模块 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-radius: 6px; color: ffffff; cursor: pointer; font-size: 20px; font-weight: normal; filter: progid:dximagetransform.microsoft.gradient (startColorstr='0088cc', endColorstr='0055cc', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); line-height: normal; padding: 14px 24px; text-align: center; CSS3 文字阴影特性 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-decoration: none; vertical-align: middle; zoom: 1; } 悬浮状态下按钮效果 .btn:hover { background-position: 0 -15px; background-color: 0055cc; background-color: 004ab3; color: ffffff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); CSS3 动画效果 -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } 点击时按钮效果 .btn:active { background-color: 0055cc; background-color: 004ab3; background-color: 004099 \9; background-image: none; outline: 0; CSS3 盒子阴影特性 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05); color: rgba(255, 255, 255, 0.75); } 获得焦点按钮效果 .btn:focus { outline: thin dotted 333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }<style><head> <body> <div class=download-info> <a href= class=btn>View project on GitHub<a><div><body><html> 这个美化按钮实例涉及一些CSS3的特性，此时不懂不要害怕，本 书后续章节中会为大家逐一介绍。在此例中只需要知道哪些属性是 CSS3的特性就足够了。同时实例中采用了“渐进增强，优雅降级”，在不 支持CSS3的浏览器中，同样可以看到按钮在不同状态下的效果，只是 失去了渐变、阴影等效果，但并不影响网站的功能与用户的体验，IE 8 下的效果如图2-15所示。 ☆图2-15 IE 8下的按钮效果 [1] 参考http:twitter.github.combootstrap。2.5 目标伪类选择器 目标伪类选择器“:target”是众多实用的CSS3特性中的一个，用来匹 配文档(页面)的URI [1] 中某个标志符的目标元素。具体来说，URI中 的标志符通常会包含一个井号，后面带有一个标志符名称，例 如“contact”“:target”就是用来匹配ID为“contact”的元素的。换种说法，在Web页面中，一些URL拥有片段标识符，它由一个井号后跟一 个锚点或元素ID组合而成，可以链接到页面的某个特定元 素。“:target”伪类选择器选取链接的目标元素，然后供定义样式。 [1] 参考 http:en.wikipedia.orgwikiUniform_Resource_Identifiercite_note-1。2.5.1 目标伪类选择器语法 目标伪类选择器的语法如表2-7所示。 表2-7 目标伪类选择器语法 注意目标伪类选择器是动态选择器，只有存在URL指向该匹 配元素时，样式效果才会生效。2.5.2 浏览器兼容性 浏览器兼容性如表2-8所示。 表2-8 目标伪类选择器浏览器兼容性 从表2-8可知，目标伪类选择器在IE 8及之前版本不被支持，但IE用 户点击目录里的链接仍将跳转到相应的标题，只是标题不会高亮显示。 提示在包含更多内容的页面中，高亮显示效果的确能给用户 带来极好的体验。如果页面效果需要兼容IE低版本浏览器，就要用到 JavaScript。这里有一些资源供大家参考。 ·“Suckerfish:target”，作者：Patrick Griffiths和Dan Webb，网址如 下。 ·http:www.htmldog.comarticlessuckerfishtarget ·“Improving the usability of within-page links”，作者：Bruce Lawson，网址如下。 ·http:dev.opera.comarticlesviewimproving-the-usability-of-within-page-l2.5.3 实战体验：制作手风琴效果 以前制作手风琴效果(Accordion)需要依赖JavaScript脚本。CSS3 的目标伪选择器可不使用任何JavaScript代码实现手风琴效果。 页面中有三个区块，默认状态只显示三个区块的标题，点击其中一 个标题时，其对应的内容就会显示；点击另一个标题时，对应区块内容 将显示，而前一块内容将隐藏。目标伪类选择器制作的页面效果如图2- 16所示。 图2-16 手风琴效果 通过目标伪类选择器“E:target”，显示和隐藏不同栏目的内容，从而 实现手风琴效果。 <!DOCTYPE HTML> <html lang=en-US><head> <meta charset=UTF-8> <title> 垂直手风琴<title> <style type=textcss> .accordionMenu { background: fff; color:424242; font: 12px Arial, Verdana, sans-serif; margin:0 auto; padding: 10px; width: 500px; } .accordionMenu h2 { margin:5px 0; padding:0; position: relative; } .accordionMenu h2:before { 制作向下三角效果 border: 5px solid fff; border-color: fff transparent transparent; content:; height: 0; position:absolute; right: 10px; top: 15px; width: 0; } .accordionMenu h2 a { 制作手风琴标题栏效果 background: 8f8f8f; background: -moz-linear-gradient( top, cecece, 8f8f8f); background: -webkit-gradient(linear, left top, left bottom,from(cecece), to(8f8f8f)); background: -webkit-linear-gradient( top, cecece, 8f8f8f); background: -o-linear-gradient( top, cecece, 8f8f8f); background: linear-gradient( top, cecece, 8f8f8f); border-radius: 5px; color:424242; display: block; font-size: 13px; font-weight: normal; margin:0; padding:10px 10px; text-shadow: 2px 2px 2px aeaeae; text-decoration:none; } .accordionMenu :target h2 a, 目标标题的效果 .accordionMenu h2 a:focus,.accordionMenu h2 a:hover,.accordionMenu h2 a:active { background: 2288dd; background: -moz-linear-gradient( top, 6bb2ff, 2288dd); background: -webkit-gradient(linear, left top, left bottom,from(6bb2ff), to(2288dd)); background: -webkit-linear-gradient( top, 6bb2ff, 2288dd); background: -o-linear-gradient( top, 6bb2ff, 2288dd); background: linear-gradient( top, 6bb2ff, 2288dd); color:FFF; } .accordionMenu p { 标题栏对应的内容 margin:0; height: 0; 默认栏目内容高度为0 ，达到隐藏效果 overflow: hidden; padding:0 10px; -moz-transition: height 0.5s ease-in; -webkit-transition: height 0.5s ease-in; -o-transition: height 0.5s ease-in; transition: height 0.5s ease-in; } 这部分是显示内容的关键代码 .accordionMenu :target p { 展开对应目标内容 height:100px; 显示对应目标栏内容 overflow: auto; } .accordionMenu :target h2:before { 展开时标题三角效果 border-color: transparent transparent transparent fff; }<style><head> <body> <div class=accordionMenu> <div class=menuSection id=brand> <h2><a href=brand>Brand<a><h2> Lorem ipsum dolor...<div> <div class=menuSection id=promotion> <h2><a href=promotion>Promotion<a><h2> Lorem ipsum dolor sit amet...<div> <div class=menuSection id=event> <h2><a href=event>Event<a><h2> Lorem ipsum dolor sit amet...<div><div><body><html> 维基百科的官网 [1] 上就运用了目标伪类选择器来高亮显示脚注，如图2-17所示。 ☆图2-17 目标伪类选择器高亮显示区块的运用 点击注解的上标链接时，其对应的注解内容区块就会高亮显示，以便用户在众多内容中找到对应的注解内容，方便用户阅读，而实现此功 能仅一行代码就完成了。 ol.references > li:target, sup.reference:target, cite:target { background-color ：def; } 除了能制作手风琴效果、高亮显示脚注之外，目标伪类选择器还可 以用在以下场景，如表2-9所示。 表2-9 “:target”应用场景 注意其中几项效果使用JavaScript制作效果会更好，因为纯 CSS的版本可能存在潜在的易用性和可用性问题。 [1] 网址为http:zh.wikipedia.orgwiki统一资源标志符cite_note-0。2.6 语言伪类选择器 使用语言伪类选择器来匹配使用语言的元素是非常有用的，特别是 用于多语言版本的网站，其作用更是明显。可以使用他来根据不同语言 版本设置页面的字体风格。2.6.1 语言伪类选择器语法 语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必 须包含在文档中，或者与文档关联，不能从CSS指定。为文档指定语 言，有两种方法可以表示。如果使用HTML 5，直接可以设置文档的语 言。例如： <!DOCTYPE HTML> <html lang=en-US> 另一种方法就是手工在文档中指定lang属性，并设置对应的语言 值。例如： <body lang=fr> 语言伪类选择器允许为不同的语言定义特殊的规则，这在多语言版 本的网站用起来是特别的方便。 E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了 lang属性，而且其值为language。2.6.2 浏览器兼容性 浏览器兼容性如表2-10所示。 表2-10 语言伪类选择器的浏览器兼容性 语言伪类选择器在IE 7及以下版本中还不被支持，对于追求完美的 设计师来说，又有点畏惧，不敢使用。其实也不是没有办法，可以为不 同的浏览器(IE 6和IE 7)采用不同的方法来实现。 ·对于IE 6浏览器，给引文元素在不同版本的时候设置不同的类名，例在英文版本下设置类名“.en”，而在法文版本下设置类名为“.fr”，就可 以通过类名给引文定义不同的样式。 ·对于IE 7浏览器，也可以采用IE 6浏览器的方法。如果不考虑IE 6 浏览器，可以使用属性选择器中的“E[foo|=en]”选择器为不同语言版本 的引文设置不同样式。2.6.3 实战体验：定制不同语言版本引文风格 如果网站是一个多语言版本，使用语言伪类选择器为特定的语言定 义不同样式是非常完美的。例如，多语言版本有一段这样的引文，如图 2-18所示。 图2-18 引文示例 在多语言的网站中，改变引文的不同样式，例如网站还有一个法语 语言版本，使用<<...>>替代是不是比引号(“...”)更适合其语言版本 呢？同时，为了突出引文的重要性，可以在不同的语言版本中给引文设 置不同的背景颜色。最后的效果如图2-19所示。☆图2-19 多语言版本引文的效果 在不增加任何代码或手工修改代码达到图2-19所示的引文效果，使 用语言伪类选择器是一个不错的方法，示例代码如下所示。 <!DOCTYPE HTML> <html lang=en-US> <head> <meta charset=UTF-8> <title> 语言伪类选择器运用<title><head> <body> WWF's goal is to: <q cite=http:www.wwf.org> build a future where people live in harmony with nature<q> we hope they succeed.<body><html>为<html>标签设置一个“lang=en-US”属性，这是默认英文版本的时 候。当网站转译到法语版本，此时<html>标签中的lang属性值动态变 成“fr”，如下所示。 <!DOCTYPE HTML> <html lang=fr> <head> <meta charset=UTF-8> <title> 语言伪类选择器运用<title><head> <body> WWF's goal is to: <q cite=http:www.wwf.org> build a future where people live in harmony with nature<q> we hope they succeed.<body><html> 也可以简单地通过目标伪类来实现。 英文(en-US) 版本的引文q 效果 :lang(en) { quotes:'' ''; } :lang(en) q {background: red;} 法文(fr) 版本的引文q 效果 :lang(fr) { quotes:'?' '?'; } :lang(fr) q {background: green;} 提示大家也可以通过这种方法为不同语言版本的网站相关元 素设置不同的样式，例如改变网站面页面的字号、设置不同的背景图片 等。2.7 UI元素状态伪类选择器 UI元素状态伪类选择器也是CSS3选择器模块组中的一部分，主要 用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整 体美观，使表单页面更具个性与品位，而且使用户操作页面表单更便利 和简单。2.7.1 UI元素状态伪类选择器语法 UI元素的状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。在HTML元素中有可用和不可用状态，例如 表单中的文本输入框；HTML元素中还有选中和未选中状态，例如表单 中的复选按钮和单选按钮。这几种状态都是CSS3选择器中常用的状态 伪类选择器，详细说明如表2-11所示。 表2-11 UI元素状态伪选择器语法2.7.2 浏览器兼容性 浏览器兼容性如表2-12所示。 表2-12 UI元素状态伪类选择器浏览器兼容性 除了IE浏览器外，各主流浏览器对UI元素状态选择器的支持都非常 好，但IE 9也开始全面支持这些UI元素状态伪类选择器(如表2-12所 示)。因此，考虑到IE 6～8是国内用户数最多的浏览器，使用UI元素 状态伪类选择器需使用特别的方法来处理。 例如使用JavaScript库，选用内置已兼容了UI元素状态伪类选择器 的JavaScript库或框架，然后在代码中引入它们并完成想要的效果。由 Keith Clark编写的Selectivizr脚本 [1] 是一个不错的选择。先将该脚本直 接引入到页面中，再从7个JavaScript库中选择一个引入，UI元素状态伪 类选择器就能够在IE上工作了。 除了使用JavaScript库外，还有一个比较原始而古老的做法，就是在不支持UI元素状态伪类选择器的IE浏览器下使用类名来处理。例如禁用 的按钮效果，可以先在HTML标签中添加一个类名“disabled”，就可以在 样式中添加样式。 .btn.disabled, 等效于.btn:disabled,用于兼容IE 低版本浏览器 .btn:disabled {… } [1] 网址为http:selectivizr.com。2.7.3 实战体验：Bootstrap的表单元素UI状态 UI元素状态伪类选择器目前主要针对应用在表单元素上，让表单更 可用、易用和好用，同时让表单设计更漂亮。这里介绍Twitter的表单元 素状态是如何来控制的。 Bootstrap中部分表单元素状态的效果如图2-20所示。 图2-20 Bootstrap表单元素状态部分效果 图中展示了表单元素中常用的几种UI状态效果，接着来看其实现代 码。<!DOCTYPE HTML> <html lang=en-US> <head> <meta charset=UTF-8> <title><title> <style type=textcss> 表单基本样式，请查看对应示例代码 表单元素获得焦点效果 textarea:focus,input[type=text]:focus,input[type=password]:focus{ border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); } 表单中下拉选择框、文件控件、单选按钮、复选按钮得到焦点时效果 select:focus,input[type=file]:focus,input[type=radio]:focus,input[type=checkbox]:focus { outline: thin dotted 333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } 禁用的input 、select 、textarea 表单元素效果 input[disabled], 等效于input:disabled select[disabled], 等效于select:disabled textarea[disabled] 等效于textarea:disabled { cursor: not-allowed; background-color: eeeeee; border-color: ddd; } 禁用的单选按钮和复选按钮效果 input[type=radio][disabled], 等效于input[type=radio]:disabled input[type=checkbox][disabled] 等效于input[type=checkbox]:disabled { background-color: transparent; } .control-group.warning > label,.control-group.warning .help-block,.control-group.warning .help-inline { color: c09853; } 表单警告状态下效果 .control-group.warning .checkbox,.control-group.warning .radio,.control-group.warning input,.control-group.warning select,.control-group.warning textarea { color: c09853; border-color: c09853; } 表单警告状态下并获得焦点下效果 .control-group.warning .checkbox:focus,.control-group.warning .radio:focus,.control-group.warning input:focus,.control-group.warning select:focus,.control-group.warning textarea:focus { border-color: a47e3c; box-shadow: 0 0 6px dbc59e; } .control-group.error > label,.control-group.error .help-block,.control-group.error .help-inline { color: b94a48; } 表单错误状态下效果 .control-group.error .checkbox,.control-group.error .radio,.control-group.error input,.control-group.error select,.control-group.error textarea { color: b94a48; border-color: b94a48; } 表单错误状态并获取焦点时效果 .control-group.error .checkbox:focus,.control-group.error .radio:focus,.control-group.error input:focus,.control-group.error select:focus,.control-group.error textarea:focus { border-color: 953b39; box-shadow: 0 0 6px d59392; } .control-group.success > label,.control-group.success .help-block,.control-group.success .help-inline { color: 468847; } 表单成功状态下效果 .control-group.success .checkbox,.control-group.success .radio,.control-group.success input,.control-group.success select,.control-group.success textarea { color: 468847; border-color: 468847; } 表单成功状态于并获得焦点下效果 .control-group.success .checkbox:focus,.control-group.success .radio:focus,.control-group.success input:focus,.control-group.success select:focus,.control-group.success textarea:focus { border-color: 356635; box-shadow: 0 0 6px 7aba7b; } .form-actions { padding: 17px 20px 18px; margin-top: 18px; margin-bottom: 18px; background-color: f5f5f5; border-top: 1px solid e5e5e5; zoom: 1; } .form-actions:before,.form-actions:after { display: table; content: ; }.form-actions:after { clear: both; } 按钮基本样式 .btn { display: inline-block; display: inline; 由于篇幅，基本样式在此省略，详细请查阅随书代码 } .btn:hover,.btn:active,.btn.active,.btn.disabled, 按钮禁用下效果，等效于.btn:disabled .btn[disabled] { background-color: e6e6e6; background-color: d9d9d9; } .btn:active,.btn.active { background-color: cccccc \9; } .btn:first-child { margin-left: 0; } .btn:hover { color: 333333; text-decoration: none; background-color: e6e6e6; background-color: d9d9d9; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; } .btn:focus { outline: thin dotted 333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn.active,.btn:active { background-color: e6e6e6; background-color: d9d9d9 \9; background-image: none; outline: 0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05); } 表单按钮禁用状态下效果 .btn.disabled, 等效于.btn:disabled .btn[disabled] { cursor: default; background-color: e6e6e6; background-image: none; opacity: 0.65; filter: alpha(opacity=65); box-shadow: none; }... 省略部分代码 注意以上样式代码摘选于Bootstrap中的表单元素样式(详细 内容参见http:twitter.github.combootstrapbase-css.htmlforms)。 上面案例主要展示的是表单元素得到焦点和禁用两种状态使用方 法，在使用UI状态选择器时特别注意，HTML结构中要存在这种状态，例如禁用的输入框，需要在HTML的对应元素上添加禁用属性。 <input class=input-xlarge disabled id=disabledInput type=text placeholder=Disabled input here... disabled=>2.8 结构伪类选择器 伪类可以将一段并不存在的HTML当作独立元素来定位，或是找到 无法使用其他简单选择器就能定位到的切实存在的元素。因此CSS3给 伪类选择器引入一种“结构伪类选择器”。这种选择器可以根据元素在文 档树中的某些特性(如相对位置)定位到它们。也就是说，通过文档树 结构的相互关系来匹配特定的元素，从而减少HTML文档对ID或类名的 定义，帮助你保持代码干净和整洁。2.8.1 重温HTML的DOM树 所有的结构伪类都是基于HTML文档树的，也称做文档对象模型 (DOM)，下面简单回顾一下这方面的知识。文档树(Document Tree)是HTML页面的层级结构。它由元素、属性和文本组成，它们都 是一个节点(Node)，就像公司的组织结构图一样。下面看一个简单的 HTML文档。 <!DOCTYPE HTML> <html lang=en-US> <head> <meta charset=UTF-8> <title>HTML DOM 树型结构图<title><head> <body> <div> <ul> <li>one<li> <li>two<li> <li>three<li><ul> <div>abc<div> para <div>def<div> para ghi<div><body><html> 依据上面的HTML文档，可以绘制一个清晰的DOM结构树，如图2-21所示。 图2-21所示的文档树包含有多个层级是因为HTML元素间的相互嵌 套。其中把直接嵌入其他元素的元素被称做那些元素的子元素 (Child)，例如结构图中的li就是ul的子元素；而随着嵌套的继续深 入，它们也就成了后代元素(Descendant)，同样，结构图中的li元素 就是body元素的后代元素。那些外部元素称为父元素(Parent)(一层 之上)，例如结构图中的ul元素就是li元素的父元素；有些外部元素称 做祖先元素(Ancestor)(两层或以上)，例如结构图中的body就是li元 素的祖先元素。另外位于相同嵌套层级的元素称为兄弟元素(具有同一 父元素节点)，例如结构图中的两个段落P元素就是兄弟元素，因为它 们具有同一个父元素div。在HTML文档中，一个元素可以同时拥有以上 部分甚至所有称谓，正如家谱中的某个成员一样，总的来说这些称谓都 是用来描述一个元素与另一个元素的关系。图2-21 HTML DOM树型结构2.8.2 结构伪类选择器语法 通过回顾HTML的DOM树型结构，清楚了元素之间的关系术语，现 在看看有哪些可以建立元素间关系的方法，表2-13列出所有结构伪选择 器的详细说明。 表2-13 结构伪类选择器使用语法 表2-13中，只有“:first-child”属于CSS2.1，此外其他的结构伪类选择 器都是CSS3的新特性，为我们提供精确定位到元素的新方式。表中只 是告诉我们CSS3结构伪类选择器的概念性的知识，有时候看起来不太好理解，针对图2-21的HTML DOM树型结构，将CSS3结构伪类选择器 结合起来理解，如图2-22所示。 图2-22 CSS3结构伪类选择器2.8.3 浏览器兼容性 CSS3结构伪类选择器在主流浏览器下运行都非常的完美，只是在 IE 9以下版本的浏览器中无法正常运行，浏览器兼容性如表2-14所示。 在本例中颜色交替只是一个很小的视觉增强，IE 8及之前版本的用 户看不到也无妨，而对于圆角、渐变之类的效果，IE将直接忽略它们，使用直角或纯色显示，看起来没有任何异常之处。 表2-14 结构伪类选择器浏览器兼容性 想为IE 8及之前的版本提供一个解决方案，需要用到JavaScript脚 本。例如要实现例中的Zebra表格效果，网上有大量的脚本可以帮你。 最适合的脚本还是取决于项目本身，可以通过Google搜索“Zebra StripeJavaScript”、“Zebra Stripe PHP”或者其他更符合需求的关键词。 还可以使用一个脚本为IE增加高级选择器的支持，然后使用选择器 实现需要的效果。例如jQuery脚本库，还有Dean Edwards的ie9.js，此外 还有前面介绍的Selectivizr脚本 [1] 配合其他JavaScript脚本库一起使用。 [1] 参考http:selectivizr.com。2.8.4 结构伪类选择器中的n是什么 在结构伪类选择器中，有4个伪类选择器接受参数n。 ·:nth-child(n) ·:nth-last-child(n) ·:nth-of-type(n) ·:nth-last-of-type(n) 在实际应用中，这个参数n可以是整数(1、2、3、4)、关键字 (odd、even)，还可以是公式(2n+1、-n+5)，但参数n的起始值始终 是1，而不是0。换句话说，当参数n的值为0时，选择器将选择不到任何 匹配的元素。 根据上面所述，将结构伪类选择器中的参数按常用的情况划分为七 种情形。 1.参数n为具体的数值 这个数值可以是任何大于0的正整数，例如“:nth-child(3)”将选择一 个系列中的第3个元素。2.参数n为表达式“nlength” 选择n的倍数，其中n从0开始计算，而length为大于0的整数。当 length为整数1时，将选择整个系列中的所有元素，直到元素耗尽无法选 择为止。因为length在实际运用中常为大于1的正数，表达式才具有实际 意义，例如“:nth-child(2n)”。 ·n=0时，2×0=0，不选中任何元素； ·n=1时，2×1=2，选中系列中的第2个元素； ·n=2时，2×2=4，选中系列中的第4个元素； ·n=3时，2×3=6，选中系列中的第6个元素；…… 以此类推，直到元素耗尽无法选择为止。 3.参数n为表达式“n+length” 选择大于或等于length的元素，例如“:nth-child(n+3)”。 ·n=0时，0+3=3，选中系列中的第3个元素； ·n=1时，1+3=4，选中系列中的第4个元素；·n=2时，2+3=5，选中系列中的第5个元素； ·n=3时，3+3=6，选中系列中的第6个元素；…… 以此类推，直到元素耗尽无法选择为止。 4.参数n为表达式“-n+length” 选择小于或等于length的元素，例如“:nth-child(-n+3)”。 ·n=0时，-0+3=3，选中系列中的第3个元素； ·n=1时，-1+3=2，选中系列中的第2个元素； ·n=2时，-2+3=1，选中系列中的第1个元素； ·n=3时，-3+3=0，不选择任何元素； ·n=4时，-4+3=-1，不选择任何元素；…… 以此类推，当值小于或等于0时将不选择任何元素。 5.参数n为表达式“nlength+b”其中b是您想设置的偏移值，其表示隔length个元素选中第 nlength+b个元素，例如“:nth-child(2n+1)”。 ·n=0时，2×0+1=1，选中系列中的第1个元素； ·n=1时，2×1+1=3，选中系列中的第3个元素； ·n=2时，2×2+1=5，选中系列中的第5个元素； ·n=3时，3×2+1=7，选中系列中的第7个元素；…… 以此类推，直到元素耗尽无法选择为止。 6.参数n为关键词“odd” 选择系列中的奇数(1、3、5、7)元素，其效果等同于“:nth- child(2n-1)”和“:nth-child(2n+1)”。 7.参数n为关键词“even” 选择系列中的偶数(2、4、6、8)元素，其效果等同于“:nth- child(2n)”。Sitepoint.com也制作了一个关于“:nth-child(n)”的参考指南 [1] 供大家对照参考，如表2-15所示。表2-15 结构伪类表达式的计算列表 以上几种情形也适用于“:nth-last-child(n)”、“:nth-of-type(n)”和“:nth- last-of-type(n)”三种结构伪类选择器。 尽管上面公式算出来的数值(1、3、5、7)也可以手动给系列元素 中的第1、3、5、7元素添加对应类名，但这样做不仅耗时费力，还容易 遗忘，代码不整洁使维护过程非常痛苦。如果想在已经存在的项目中插 入另外一个，不得不对插入处之后的项目全部重新定义新的类名，因为 插入后新的序号被打乱。而用CSS3的结构伪类选择器“:nth-child(n)”代 替类名，跟踪元素系列的序号变化并自动匹配将会更为准确、高效，而 且维护非常方便。 或许会觉得这样的数学计算太麻烦，从而产生对“nth-child(n)”系列 结构伪类选择器的抵触。大家不用担心，线上有一些不错的工具，可以 通过更改数值为即时查看它是如何影响页面样式的，这将有助于更好地 了解“:nth-child(n)”系列结构伪类选择器的作用，例如： ·Lea Verou制作的工具 [2]。·Chris Coyier制作的工具 [3]。 ·Neal Grosskopf制作的工具 [4]。 [1] 网址为 http:reference.sitepoint.comcssunderstandingnthchildexpressions。 [2] http:lea.verou.medemosnth.html，笔者比较喜欢的一个工具。 [3] http:css-tricks.comexamplesnth-child-tester，比较基础，只展示 了“:nth-child(n)”的使用效果。 [4] http:www.nealgrosskopf.comtechresources80。2.8.5 结构伪类选择器的使用方法详解 结构伪类选择器是CSS3选择器最具特色的一部分内容，同时也是 CSS3选择器中最出色的一部分内容。通过前面的内容，大家对CSS3的 结构伪类选择器有了初步的了解，但是完全理解它们，还是需要一定的 实例，下面分别介绍CSS3的结构伪类选择器的具体使用方法。 为了更好地实例化，先创建一个简单的列表结构，并附上一些简单 的样式。 <!DOCTYPE HTML> <html lang=en-US> <head> <meta charset=UTF-8> <title>CSS3 结构伪选择器的使用<title> <style type=textcss> { margin: 0; padding: 0; } ul { margin: 50px auto; width: 400px; list-style: none outside none; } li { display:inline-block; margin: 5px; padding: 5px; width:50px; height: 50px; font: bold 30px50px arial; background: 000; color: fff; border-radius: 50px; text-align: center; }<style><head> <body> <ul> <li>1<li> <li>2<li>… <li>20<li><ul><body><html> 页面初始效果如图2-23所示。 图2-23 页面初始效果 1.:fist-child的使用 “:first-child”允许定位某个元素的第一个子元素，例如想改变列表中 的第一个“li”的背景色，代码如下。 ul>li:first-child { background-color: green; }在没有这个选择器之前，需要在列表中的第一个“li”加上一个类 名，例如“first”，然后给添加对应的样式。 ul>li.first { background-color: green; } 其实这两种最终效果是一样的，如图2-24所示。后面这种需要在 html标签中增加一个额外的class类名，只是一个地方还好处理，如果是 多处都具有这样的效果，给html添加类名的方法其弊端明显可见。 图2-24 :first-child效果 在实际项目中这样的运用也是常有的事，例如博客侧边栏的标 题“h2”顶部都有一个“margin”，用来区分标题和它们前面区块的内容，但是第一个标题“h2”不需要顶部“margin”值，就可以使用下面的代码。.aside > h2 { margin-top: 15px; } .aside>h2:first-child { margin-top: 0; } 上面看到的是使用“:first-child”来移除标题顶部的间距，当然也可以 用来移除元素底部的间距，此时在不支持“:first-child”的浏览器中，布局 并不会因此而破坏掉，它只会看起来有些不同(顶部或底部间距没清 除)。但是，如果使用“:first-child”来移除一个浮动元素的左边距或右边 距，在不支持“:first-child”的浏览器中，布局将会被破坏掉。 2.:last-child的使用 “:last-child”与“:first-child”作用类似，不同的是“:last-child”选择的是 元素最后一个子元素。就拿上面的例子来说，改变列表中最后一 个“li”的背景色，使用这个选择器如下所示。 ul>li:last-child { background-color: blue; } 和“:first-child”一样，以前为了实现上面的效果，都是在列表中的最 后一个“li”添加一个类名“last”，并在此类添加样式，其最终效果都是一 样的，如图2-25所示。图2-25 :last-child效果 在实际的Web项目中，“:last-child”的用处也非常广泛。例如在一个 导航条中每个导航项都有一个右边框效果，但最后一个不想要这个右边 框，此时就可以使用“:last-child”。 nav > li {… border-right: 1px solid ccc; } nav > li:last-child { border-right: none; } 另一个较常见的就是在博客制作中，假设“post”中最后一段不需要 底部“margin”值，代码如下。 .post > p:last-child { margin-bottom: 0; }3.:nth-child的使用 “:nth-child”用来定位某个父元素的一个或多个特定的子元 素。“:nth-child”可以接受参数n，而且n可以是数值，也可以是表达式 和关键词。有关于“n”是什么？大家可以参考“结构伪类选择器中的n是 什么”。在这一节中，通过实例加深理解“:nth-child(n)”。 (1):nth-child(3) 参数n是一个具体的整数值，例如“:nth-child(3)”表示选择某元素下 的第3个子元素，(这里的整数3可以根据自己的需要来定义)。接上面 的实例，如果需要改变列表项中第3个“li”元素的背景色，就可以直接这 样使用。 ul>li:nth-child(3){ background-color: yellow; } 这样一来，列表中的第3个li的背景就变成黄色了，如图2-26所示。图2-26 :nth-child(3)效果 上面仅是列表中存在li一种子元素，但是如果列表中第3个li之前还 有其他的子元素，例如DIV元素(当然这样写HTML是一种不规范的写 法，此处仅用来说明问题，不提倡这样去写HTML结构)，“ul>li:nth- child(3)”还会选中列表中的第3个li元素吗？先不做任何回答，改变一下 实例的代码。 <!DOCTYPE HTML> <html lang=en-US> <head> <meta charset=UTF-8> <title><title> <style type=textcss> ul { list-style: none outside none; padding: 10px; background: green; width: 400px; } li {margin-bottom: 10px;border: 1px solid orange;} div {margin-bottom: 10px;border: 1px solid blue;}<style><head><body> <ul> <li>1<li> <li>2<li> <div>div<div> <div>div<div> <li>3<li>… <li>10<li><ul><body><html> 页面的初步效果如图2-27所示。 图2-27 页面初步效果 同样，加上以下代码。 ul>li:nth-child(3){ background-color: yellow; } 保存上面样式后刷新浏览器，并没有得到想要的效果，列表中的第 3个li背景色没有为此改变。因为在ul里面有其他类型的元素(不是 li)，它也会算作是列表的子元素。就上面的实例，li:nth-child(3)并不存 在，列表的第3个子元素是div而不是li，此时如果还想改变第3个列表的 背景色，就必须改变“:nth-child”中的值(或者使用:nth-of-type)。拿 这个实例来说，第3个li是列表中的第5个子元素，将上面的代码改为以 下形式。 ul>li:nth-child(5){ background-color:yellow; } 接下来用效果来证明是不是需要的效果，如图2-28所示。图2-28 :nth-child(5)改变第3个li背景效果 通过上面两个实例的对比，大家清楚“ul>li:nth-child(3)”表达的并不 是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前 不存在其他的元素，命题才有意义，否则就会造成开始的问题，不会改 变列表第3个li元素的背景色。 (2):nth-child(n) 参数n是一个简单的表达式，取值从0开始计算的，到什么时候结束 不知道，如果在实际应用中直接这样使用，将会选 ......</div> </div> <div id="txtThisUrl"> <a href="http://www.100md.com/html/file/202001/212150.htm" target="_blank">http://www.100md.com/html/file/202001/212150.htm</a></div> <div id="txttips"> 您现在查看是摘要介绍页，<a href="http://www.100md.com/about/help.htm"> 详见PDF附件(27722KB，1171页)</a>。</div> <script language="javascript" type="text/javascript" src="http://www.100md.com/comm/v2019/login.js"></script> <script language="javascript" type="text/javascript" src="http://www.100md.com/comm/v2019/after.js"></script> <div id="theRInfo"><script language="javascript" type="text/javascript" src="http://www.100md.com/rjs/file/202001/212150.js"></script><script language="javascript" type="text/javascript" src="http://www.100md.com/comm/v2019/related.js"></script></div> </div><div id="right"><script language="javascript" type="text/javascript" src="http://www.100md.com/comm/v2019/right.js"></script></div> </div><div id="copyright"><script language="javascript" type="text/javascript" src="http://www.100md.com/comm/v2019/copyright.js"></script></div></body></html>