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选择器 浏览器支持 选择器的未来 应用实例 本章小结