HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
《HTML+CSS网页设计与布局》教案
《HTML+CSS网页设计与布局》教案第一章：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML编写简单的网页1.2 教学内容HTML简介HTML基本语法HTML标签及其属性常用的HTML标签1.3 教学过程讲解HTML的基本概念和作用演示HTML的基本语法和结构示例：编写一个简单的HTML网页学生练习：编写自己的HTML网页1.4 课后作业复习HTML的基本语法和结构练习使用HTML编写简单的网页第二章：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和选择器学会使用CSS样式化网页元素2.2 教学内容CSS简介CSS基本语法CSS选择器常用的CSS属性2.3 教学过程讲解CSS的基本概念和作用演示CSS的基本语法和选择器示例：使用CSS样式化网页元素学生练习：使用CSS样式化自己的HTML网页2.4 课后作业复习CSS的基本语法和选择器练习使用CSS样式化网页元素第三章：网页布局基础3.1 教学目标了解网页布局的基本概念和原则掌握使用HTML和CSS进行网页布局的方法学会使用浮动和定位实现网页布局3.2 教学内容网页布局概述使用HTML进行网页布局使用CSS进行网页布局浮动和定位3.3 教学过程讲解网页布局的基本概念和原则演示使用HTML和CSS进行网页布局的方法示例：使用浮动和定位实现网页布局学生练习：使用浮动和定位实现自己的网页布局3.4 课后作业复习网页布局的基本概念和原则练习使用HTML和CSS进行网页布局第四章：响应式网页设计4.1 教学目标了解响应式网页设计的基本概念和原则掌握使用CSS媒体查询实现响应式网页设计的方法学会使用Bootstrap框架进行响应式网页设计4.2 教学内容响应式网页设计概述使用CSS媒体查询实现响应式网页设计使用Bootstrap框架进行响应式网页设计4.3 教学过程讲解响应式网页设计的基本概念和原则演示使用CSS媒体查询实现响应式网页设计的方法示例：使用Bootstrap框架进行响应式网页设计学生练习：使用Bootstrap框架进行自己的响应式网页设计4.4 课后作业复习响应式网页设计的基本概念和原则练习使用CSS媒体查询实现响应式网页设计第五章：网页设计与布局实践5.1 教学目标综合运用HTML、CSS和网页布局技术，设计和实现一个完整的网页掌握网页设计和布局的流程和技巧学会使用网页设计和布局工具，如Sublime T ext、Visual Studio Code等5.2 教学内容网页设计与布局流程使用网页设计和布局工具实践项目：设计和实现一个完整的网页5.3 教学过程讲解网页设计与布局的流程和技巧演示使用网页设计和布局工具示例：设计和实现一个完整的网页学生练习：设计和实现自己的网页5.4 课后作业复习网页设计与布局的流程和技巧练习使用网页设计和布局工具完成实践项目：设计和实现一个完整的网页第六章：HTML高级应用6.1 教学目标理解HTML5的新特性掌握使用HTML5新增的语义标签学会使用Canvas和SVG进行图形绘制掌握多媒体的使用和音频视频控制6.2 教学内容HTML5简介新增的语义标签Canvas和SVG的使用多媒体标签：audio和video6.3 教学过程讲解HTML5的新特性和意义演示新增语义标签的使用示例：使用Canvas绘制图形示例：使用SVG绘制图形学生练习：结合audio和video标签制作多媒体网页6.4 课后作业复习HTML5的新特性和语义标签练习使用Canvas和SVG绘制图形尝试制作一个包含音频视频的HTML5网页第七章：CSS3高级应用7.1 教学目标理解CSS3的重要性掌握CSS3的新特性学会使用伪元素和伪类掌握过渡动画和转换效果7.2 教学内容CSS3简介CSS3新特性伪元素和伪类的使用过渡和动画7.3 教学过程讲解CSS3的重要性和新特性演示伪元素和伪类的应用示例：制作简单的过渡动画示例：使用keyframes制作复杂的动画学生练习：设计并实现一个带有动画效果的CSS3样式7.4 课后作业复习CSS3的新特性和伪元素练习使用CSS3制作过渡动画尝试设计一个创意的动画效果并实现第八章：网页设计规范与最佳实践8.1 教学目标理解网页设计规范的重要性掌握Web标准和安全性的原则学会遵循最佳实践进行网页设计了解网站无障碍性（Accessibility）8.2 教学内容网页设计规范概述Web标准和无障碍性最佳实践案例分析网站性能优化8.3 教学过程讲解网页设计规范的意义和重要性演示遵循Web标准的设计案例讨论最佳实践在网页设计中的应用示例：进行网站性能优化的基本操作学生练习：根据设计规范和最佳实践，对一个网页进行优化8.4 课后作业复习网页设计规范和Web标准学习并实践网站无障碍性的基本原则尝试对一个网页进行性能优化第九章：前端框架与库9.1 教学目标理解前端框架和库的作用掌握流行的前端框架和库学会使用框架和库提高网页开发效率了解框架和库的原理和适用场景9.2 教学内容前端框架和库的介绍Bootstrap、jQuery和React的基本使用框架和库的选择依据框架和库的优缺点比较9.3 教学过程讲解前端框架和库的概念和优势演示Bootstrap、jQuery和React的基本用法讨论在不同项目中选择框架和库的策略学生练习：选择一个前端框架或库，完成一个简单的项目9.4 课后作业复习前端框架和库的基本概念学习至少一个新框架或库的基本用法尝试使用前端框架或库完成一个个人项目第十章：网页设计与布局项目实战10.1 教学目标综合运用所学知识和技能掌握项目开发的流程和方法学会团队协作和版本控制培养解决实际问题的能力10.2 教学内容项目开发流程概述团队协作与版本控制工具实战项目介绍与分析项目实战与展示10.3 教学过程讲解项目开发的基本流程和方法演示使用Git等版本控制工具进行团队协作分析并介绍实战项目的需求和设计学生分组实践，完成实战项目项目展示与点评10.4 课后作业复习项目开发流程和团队协作工具参与实战项目，完成分配的任务准备项目展示的PPT和演讲稿重点和难点解析重点环节一：HTML基本语法和结构理解HTML的基本概念和作用掌握HTML的基本语法和结构学会使用HTML编写简单的网页重点环节二：CSS基本语法和选择器理解CSS的基本概念和作用掌握CSS的基本语法和选择器学会使用CSS样式化网页元素重点环节三：网页布局基础了解网页布局的基本概念和原则掌握使用HTML和CSS进行网页布局的方法学会使用浮动和定位实现网页布局重点环节四：响应式网页设计了解响应式网页设计的基本概念和原则掌握使用CSS媒体查询实现响应式网页设计的方法学会使用Bootstrap框架进行响应式网页设计重点环节五：HTML高级应用理解HTML5的新特性掌握使用HTML5新增的语义标签学会使用Canvas和SVG进行图形绘制掌握多媒体的使用和音频视频控制重点环节六：CSS3高级应用理解CSS3的重要性掌握CSS3的新特性学会使用伪元素和伪类掌握过渡动画和转换效果重点环节七：网页设计规范与最佳实践理解网页设计规范的重要性掌握Web标准和安全性的原则学会遵循最佳实践进行网页设计了解网站无障碍性（Accessibility）重点环节八：前端框架与库理解前端框架和库的作用掌握流行的前端框架和库学会使用框架和库提高网页开发效率了解框架和库的原理和适用场景重点环节九：网页设计与布局项目实战综合运用所学知识和技能掌握项目开发的流程和方法学会团队协作和版本控制培养解决实际问题的能力本教案涵盖了HTML、CSS和网页布局的基础知识，从HTML的基本语法和结构，到CSS的基本语法和选择器，再到网页布局的基础知识和实践，接着是响应式网页设计和高级应用，是前端框架与库的使用以及项目实战。
HTML5CSS3网站设计基础教程_教学指导大纲
HTML5CSS3网站设计基础教程_教学指导大纲一、引言A. 简介1. 概述HTML5和CSS32. 网站设计的重要性和必要性B. 目标读者1. 网站设计初学者2. 对HTML和CSS有一定了解的读者C. 教学目标1. 理解HTML5和CSS3的基本概念和语法2. 掌握基本的网站设计技巧和方法3. 能够设计简单但具有吸引力的网页布局4. 运用HTML5和CSS3创建响应式网站二、HTML5基础A. HTML5简介1. HTML5的发展历程2. HTML5的新特性和改进之处B. HTML5的基本结构1. DOCTYPE声明2. HTML文档的基本结构C. HTML5常用标签1. 文本标签2. 超链接标签3. 图像标签4. 表格标签5. 表单标签D. HTML5多媒体1. 音频和视频标签的使用2. 使用Canvas绘制图形3. 嵌入地图和地理定位E. HTML5表单和表单验证1. 表单元素2. 表单验证的基本原理和方法三、CSS3基础A. CSS3简介1. CSS的发展历程2. CSS3的新特性和改进之处B. CSS选择器和样式规则1. ID选择器和类选择器2. 标签选择器和属性选择器3. 组合选择器和伪类选择器C. CSS盒模型1. 盒子的尺寸和边框2. 盒子的内边距和外边距D. CSS布局和定位1. 流式布局2. 弹性盒子布局3. 定位布局E. CSS3过渡和动画1. 过渡效果的基本原理和用法2. 动画效果的实现方法四、响应式网站设计A. 响应式网站设计的概念1. 什么是响应式网站设计2. 为什么需要响应式网站设计B. 响应式网站设计的原则和方法1. 弹性网格布局2. 媒体查询的应用3. 图像和媒体资源的处理C. 响应式网站设计的实践1. 设计响应式布局2. 适配不同设备和屏幕尺寸3. 进行兼容性测试和优化五、总结A. 知识回顾1. HTML5的基本概念和语法2. CSS3的样式规则和布局B. 学习建议1. 实践和练习的重要性2. 深入学习和进阶的方向C. 结束语1. 网站设计的未来发展趋势2. 鼓励读者继续学习和探索六、附录A. HTML5和CSS3的常用资源和工具推荐B. 参考文献和学习资料以上为《HTML5CSS3网站设计基础教程_教学指导大纲》的详细内容概述，本教程将通过逐步引导读者学习HTML5和CSS3的基础知识，同时指导读者如何运用所学知识进行网站设计。
css3选择题使用方法详解
css3选择题使用方法详解css3选择题使用方法详解一通用选择器1 *{}通配选择符(CSS2)：适合所有元素对象。
2 E类型(HTML)选择符（CSS1）：以文档语言对象类型DOM作为选择符。
3 E#myid是id选择符（CSS1）：以唯一标识符id属性等于myid 的E对象作为选择符。
4 E.myclass是类class选择符(CSS1)：以class属性包含myclass 的E对象作为选择符。
5 E F：包含选择符(CSS1)：选择所有被E元素包含的F元素。
CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。
只要F在E的后边，E只是作为一个参考。
E~F { background:#ff0; }2 临近(相邻)选择器(css2)：E+F{}：EF元素相邻，即选择紧贴在E 元素之后F元素。
3 包含（子）选择器(css2)：E>F{}：EF不可以隔代，E只能匹配到下一个相邻辈F。
二属性选择器1．E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。
2．E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。
3．E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素。
4．E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
5．E[att] 选择具有att属性的E元素。
6．E[att="val"]选择具有att属性且属性值等于val的E元素。
7．E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
HTML5+CSS3网站设计CSS3选择器
第4章CSS3选择器《HTML5+CSS3网站设计基础教程》学习目地/Target掌握CSS3新增加地属性选择器,能够运用属性选择器为页面地元素添加样式。
理解关系选择器地用法,能够准确判断元素与元素间地关系。
掌握常用地结构化伪类选择器,能够为相同名称地元素定义不同样式。
掌握伪元素选择器地使用,能够在页面插入所需要地文字或图片内容。
掌握CSS伪类,会使用CSS伪类实现超链接特效。
章节概述/Summary选择器是CSS3一个重要地内容,使用它可以大幅度提高开发员书写与修改样式表地效率。
实际上,在上一章已经介绍过一些常用地选择器,这些选择器基本上能够满足Web设计师常规地设计需求。
本章将向读者介绍CSS3新增地多种选择器。
通过本章地学习,读者可以更轻松地控制网页元素。
/Contents01 02属性选择器关系选择器03结构化伪类选择器/Contents04链接伪类05伪元素选择器06阶段案例—制作网页设计软件列表01属性选择器属性选择器可以根据元素地属性及属性值来选择元素。
CSS3新增了3种属性选择器:E[att^=value],E[att$=value]与E[att*=value],本节将详细介绍这3种选择器。
掌握E[att^=value]属性选择器地用法,能够选择包含指定前缀字符地字符串。
学习目地1.E[att^=value]属性选择器1.E[att^=value]属性选择器E[att^=value]属性选择器是指选择名称为E地标记,且该标记定义了att属性,att属性值包含前缀为value 地子字符串。
E是可以省略地,如果省略则表示可以匹配满足条件地任意元素。
掌握E[att$=value]属性选择器地用法,能够选择包含指定后缀字符地字符串。
学习目地2.E[att$=value]属性选择器2.E[att$=value]属性选择器E[att$=value]属性选择器是指选择名称为E地标记,且该标记定义了att属性,att属性值包含后缀为value 地子字符串。
CSS3中的子元素选择器
CSS3中的⼦元素选择器⽬录：1.⼦元素选择器>，⽤来选中某个元素的第⼀级⼦元素，也就是⼉⼦元素<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* ⼦代选择器,只对⼉⼦元素有效 */p>strong{color: red;}</style></head><body><p>这是p标签，<strong>表⽰⼀个段落</strong></p><p>这是p标签，嵌套了<i>b标签和<strong>i标签</strong></p></body></html>2.兄弟选择器+，两个元素有同⼀个⽗元素，只对邻近的第⼀个元素起作⽤<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 兄弟选择器,只对相邻的⼀个元素起作⽤ */h3+p{color: #008000;font-size: 18px;font-family: "楷体";}</style></head><body><h3>望庐⼭瀑布</h3><p>⽇照⾹炉⽣紫烟，遥看瀑布挂前川。
</p><p>飞流直下三千尺，疑是银河落九天。
css3 手册所有
css3 手册所有一、引言CSS（层叠样式表）是一种用于描述文档样式的标记语言，具体包括字体、颜色、布局等方面的样式定义。
CSS3是CSS的最新版本，是Web开发中常用的样式定义语言之一。
本手册将详细介绍CSS3的各项属性及其使用方法。
二、选择器1. 元素选择器元素选择器是CSS中最常用的选择器之一，通过元素名称来选择文档中的元素。
例如，使用`p`选择器可以选择所有的`<p>`标签。
2. 类选择器类选择器用于选择带有特定类名的元素。
通过在类名前面加上点号（.），例如`.red`，可以选择具有`red`类的元素。
3. ID选择器ID选择器用于选择具有特定ID的元素。
通过在ID名称前面加上井号（#），例如`#header`，可以选择具有`header`的ID的元素。
4. 属性选择器属性选择器用于选择具有特定属性值的元素。
通过在属性名前加上方括号（[]），例如`[type="text"]`，可以选择type属性值为"text"的元素。
5. 伪类选择器伪类选择器用于选择元素的特殊状态。
常见的伪类选择器有`hover`、`active`和`visited`等。
6. 伪元素选择器伪元素选择器用于在文档中添加不存在的元素并为其添加样式。
常见的伪元素选择器有`::before`和`::after`等。
三、文本样式1. 字体可以使用`font-family`属性设置元素的字体。
例如，`font-family: Arial, sans-serif;`可以设置字体为Arial。
2. 颜色可以使用`color`属性设置元素的文本颜色。
例如，`color: red;`可以将文本颜色设置为红色。
3. 背景可以使用`background-color`属性设置元素的背景颜色。
例如，`background-color: #f1f1f1;`可以将背景颜色设置为浅灰色。
四、盒子模型1. 尺寸可以使用`width`和`height`属性设置元素的宽度和高度。
HTML5+CSS3网页设计与制作—教学大纲
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。
《HTML5+CSS3网站设计基础教程》课程标准
《HTML5+CSS3网页设计基础教程》课程标准第一部分、课程定位一、课程性质本课程是计算机应用专业一门专业必修课程二、课程性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。
通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
三、前导、后续课程（1）前导课程计算机应用基础（2）后续课程JavaScript编程、Vue.js、微信小程序开发第二部分、课程设计一、基本理念高职教育的集中实践教学环节需明确必要的理论知识的深化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
二、课程设计思路（1）以职业岗位和后续课程需求确定课程目标首先组建专业必修课、专业教师、企业专家三方人员组成的课程开发团队，进行课程服务专业的人才培养目标分析，确定计算机应用专业的岗位面向；进而确定本课程所织成的具体核心课程有哪些？同时结合行业对岗位任职的具体标准，确定课程的具体目标。
（2）依据职业标准，通过对所服务的后续课程和必修课程本身分析，以专业基础课与学习领域课程聚合点构建教学内容通过对职业标准进行剖析和本门课程所服务的后续课程本身进行分析，得出后续专业课程负载点与专业基础课程支撑点存在聚合，将这些聚合点作为教学内容选择、实训任务确定的依据。
（3）根据教学内容需求和学生学情的分析设计教学方法和手段根据教学内容需求，以及根据学生形象思维强、逻辑思维相对弱的现状，设计案例教学法、引导文教法等，应用项目应用设计等教学手段服务抽象的理论教学。
（4）以优质的教学资源和优秀的教学团队，为课程实施和后续课程服务提供保障。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第2页
本章的学习目标
掌握选择器的基础知识 了解CSS3特性选择器
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第3页
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第19页
组合器
假定读者以前使用过CSS，就肯定遇到过 组合器。读者肯定知道后继选择器，该选 择器有这个名称，是因为它们会选择出给 定元素在文档树中的子元素。简言之，后 继组合器可以选择出一个元素中某元素类 型的所有实例，例如article p {...}。
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第18页
8.3 CSS3选择器
组合器 特性和子串选择器 UI元素状态伪类 Target伪类 结构伪类 伪元素 否定伪类
:last-of-type :nth-of-type :nth-last-of-type :only-of-type :empty :root
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器第2源自页伪元素前面简要介绍了::first-letter伪元素， CSS3给伪元素引入了新的双冒号语法(::) ，以区分它们和伪类。这个新语法应用于 CSS 1和CSS2中的如下伪元素： ::first-letter ::first-line ::before ::after 进一步研究伪元素
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第28页
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第29页
8.5 选择器的未来
第8章 CSS3选择器
第21页
UI元素状态伪类
大多数窗体元素都可以启用 、禁用或选中。使用UI元素 状态伪类，可以在这些元素 处于特定状态时选择它们， 例如选中的复选框。下面介 绍基本的登录窗体，看看如 何实现这些元素状态伪类。
正常样式的登录窗体
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第14页
一般兄弟选择器
“一般兄弟选择器”(general sibling selector)匹配其他元素的兄弟元素类型。 不过，该元素不必是直接前方相邻的元素 。因此，假设有两个<p>元素同时都是 <h1>元素的兄弟元素，则都会使用如下选 择器指定的规则。 h1~p {}
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第10页
id选择器
“id选择器”(id selector)与类选择器的工 作方式很类似，只是它作用于id特性。在id 特性值前需要使用一个“#”号。因此，一 个id特性值为abstract的元素，可以使用如 下选择器进行标识：#abstract
CSS3选择器在IE9+、Firefox 3.5+、 Chrome 4+、Safari 4+和Opera 10+上获 得了完全的支持。 IE6、IE7和IE8不支持CSS3选择器，IE7和 IE8支持一般同级组合器、:first-child和所 有特性选择器，但使用内置的JavaScript 或jQuery库编写填充物程序，就可以解决 这个问题。
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第12页
后代选择器
“后代选择器”(descendant selector)匹配 一种元素类型，该元素为另一指定元素的后 代元素(或者说嵌套于另一指定元素内)，而 并非仅仅是直接子元素。尽管大于号被用于 作为子选择器的连接符，但是后代选择器的 连接符却是空格。查看以下示例： table b {}
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第25页
否定伪类
最后要介绍的选择器是否定伪类:not()。在 许多方面，它的工作方式与其他选择器相 反，因为它允许选择不匹配选择器的参数 的元素，但它的实用性是相同的——你可 能会愈来愈多地使用它。 一个主要示例是给不是Submit按钮的所有 窗体输入设置样式：
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第7页
通用选择器
“通用选择器”(universal selector)由一个“星 号”(*)表示，作用类似于匹配文档中全部元素类 型的通配符。*{} 如果需要将某个规则应用于全部元素，则可以使 用此选择器。某些时候它还被用于设置应用于整 个文档的默认值(如font-family和font-size)，除 非使用更为具体的选择器指定某一元素中对应的 相同属性应使用其他值。
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第26页
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第27页
8.4 浏览器支持
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第20页
特性和子串选择器
如果给定的特性存在，最基本的特性选择 器就允许设置元素的样式。 “Starts with” 子串特性选择器 “ends with” 子串特性选择器 “Contains” 子串特性选择器
HTML5+CSS3网页设计实例教程
第22页
Target伪类
CSS3引入了新的:target伪类。在选中的元 素成为链接的活动目标(指向它的URL的片 段标识符)时，就可以使用:target。
使用CSS3的:target伪类建立带选项卡的界面
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第23页
结构伪类
:first-child :last-child :nth-child :nth-last-child :only-child :first-of-type
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第13页
相邻兄弟选择器
“相邻兄弟选择器”(adjacent sibling selector)匹配一种作为其他元素相邻兄弟 的元素类型。例如，如果希望使任何一级 标题后的第一个段落与其他<p>元素采用不 同样式，可以通过类似如下方式使用相邻 兄弟选择器，仅为<h1>元素后出现的第一 个<p>元素指定规则： h1+p {}
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第8页
类型选择器
“类型选择器”(type selector)匹配所有在由逗 号分隔的列表中指定的元素。它使你能够将相同 的规则应用于多个元素。例如，如果需要将相同 的规则应用于不同尺寸的标题元素，下面的规则 将匹配所有h1、h2以及h3元素：h1, h2, h3 {}
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第11页
子选择器
“子选择器”(child selector)匹配某一元 素的直接子元素。在下面的例子中，它匹 配<td>元素中的任何作为其直接子元素的 <b>元素。两个元素的名称使用一个“大于 号”(>)分隔，指明b是td的子元素，此处该 符号称为“连接符”(combinator)： td>b {}
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第9页
类选择器
“类选择器”(class selector)能够将规则 与一个(或多个)包含class特性的元素相匹 配，该特性的值匹配你在类选择器中指定 的值。例如，假设你拥有一个<aside>元素 ，其class特性的值为BackgroundNote， 如下所示： <aside class="BackgroundNote">This paragraph contains an aside.</aside>
第8章 CSS3选择器
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
本章概述
为了使用CSS给元素设置样式，需要指定该元素 。输入CSS选择器，就可以在DOM中指定特定的 元素。使用CSS3选择器，可以用非常短的标记 清晰和灵活地指定元素。而且，新元素状态伪类 还允许突出显示动态的状态变化。
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第32页
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结