HTML5+CSS3网页设计实例教程 第8章 CSS3选择器

HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第32页
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第33页
8.7 本章小结
本章介绍了CSS3特性选择器、结构元素状 态，:target以及否定伪类。然后简要论述 CSS 2.1中生成内容的伪元素:before 和 :after，了解它们如何与HTML5的内容相结 合，并介绍CSS3中新的双冒号语法。 使用强大的CSS3选择器，就不必在标记中 添加必要的类和ID，但能将内容和显示方 式彼此分开。

HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第13页
相邻兄弟选择器
“相邻兄弟选择器”(adjacent sibling selector)匹配一种作为其他元素相邻兄弟 的元素类型。例如，如果希望使任何一级 标题后的第一个段落与其他<p>元素采用不 同样式，可以通过类似如下方式使用相邻 兄弟选择器，仅为<h1>元素后出现的第一 个<p>元素指定规则： h1+p {}
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第7页
通用选择器


“通用选择器”(universal selector)由一个“星 号”(*)表示，作用类似于匹配文档中全部元素类 型的通配符。*{} 如果需要将某个规则应用于全部元素，则可以使 用此选择器。某些时候它还被用于设置应用于整 个文档的默认值(如font-family和font-size)，除 非使用更为具体的选择器指定某一元素中对应的 相同属性应使用其他值。

HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第12页
后代选择器
“后代选择器”(descendant selector)匹配 一种元素类型，该元素为另一指定元素的后 代元素(或者说嵌套于另一指定元素内)，而 并非仅仅是直接子元素。尽管大于号被用于 作为子选择器的连接符，但是后代选择器的 连接符却是空格。查看以下示例： table b {}
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第9页
类选择器
“类选择器”(class selector)能够将规则 与一个(或多个)包含class特性的元素相匹 配，该特性的值匹配你在类选择器中指定 的值。例如，假设你拥有一个<aside>元素 ，其class特性的值为BackgroundNote， 如下所示： <aside class="BackgroundNote">This paragraph contains an aside.</aside>

HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第14页
一般兄弟选择器
“一般兄弟选择器”(general sibling selector)匹配其他元素的兄弟元素类型。 不过，该元素不必是直接前方相邻的元素 。因此，假设有两个<p>元素同时都是 <h1>元素的兄弟元素，则都会使用如下选 择器指定的规则。 h1~p {}

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选择器
第4页
8.1 选择器概述

W3C Selectors Level 3模块在2011年9月成为一个 推荐标准。它列出了所有的选择器，将近40个，不 只是CSS3中的选择器。这是因为，CSS3并不是一 个全新的规范，而是建立在CSS 1 和 CSS 2.1的基 础上。

HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第15页
子选择器与兄弟选择器的用途
子选择器与相邻兄弟选择器都很重要，因 为它们能够减少在HTML文档中需要添加的 class特性的数量。 如果决定将每个<h1>元素后的前两个<p> 元素以粗体显示，就需要回过头为每个 <h1>元素后的第二个<p>元素添加一个新 的class特性。因此，子元素选择器与相邻 兄弟选择器为设置文档样式以及使标记更 加简洁，增加了很大的灵活性。
主要内容
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伪类 结构伪类 伪元素 否定伪类

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库编写填充物程序，就可以解决 这个问题。

:last-of-type :nth-of-type :nth-last-of-type :only-of-type :empty :root

HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第24页
伪元素
前面简要介绍了::first-letter伪元素， CSS3给伪元素引入了新的双冒号语法(::) ，以区分它们和伪类。这个新语法应用于 CSS 1和CSS2中的如下伪元素： ::first-letter ::first-line ::before ::after 进一步研究伪元素
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第30页
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第31页
8.6 应用实例
CSS的简单应用的页面浏览效果

尽管本书介绍了CSS3，但CSS4已经有了 。它是选择器的规范。Selectors Level 4 Module当前仍是草案，且会定期更新。尽 管CSS4还处于其早期阶段，且会有很大的 修订，但会从选择器规范中删除一些选择 器，并添加一些选择器。删除的选择器包 括伪元素，因为它们会放在其他规范中。

HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第19页
组合器

假定读者以前使用过CSS，就肯定遇到过 组合器。读者肯定知道后继选择器，该选 择器有这个名称，是因为它们会选择出给 定元素在文档树中的子元素。简言之，后 继组合器可以选择出一个元素中某元素类 型的所有实例，例如article p {...}。
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选择器 浏览器支持 选择器的未来 应用实例 本章小结
第8章 CSS3选择器
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
本章概述
ห้องสมุดไป่ตู้
为了使用CSS给元素设置样式，需要指定该元素 。输入CSS选择器，就可以在DOM中指定特定的 元素。使用CSS3选择器，可以用非常短的标记 清晰和灵活地指定元素。而且，新元素状态伪类 还允许突出显示动态的状态变化。
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第20页
特性和子串选择器
如果给定的特性存在，最基本的特性选择 器就允许设置元素的样式。 “Starts with” 子串特性选择器 “ends with” 子串特性选择器 “Contains” 子串特性选择器

HTML5+CSS3网页设计实例教程

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 选择器的未来

HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第16页
特性选择器

特性选择器能够在选择器中使用元素所包 含的特性及其取值。有多种特性选择器可 供使用，它们使以复杂方式选择文档中的 元素成为可能。
使用特性选择器的页面效果
HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第17页
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第11页
子选择器
“子选择器”(child selector)匹配某一元 素的直接子元素。在下面的例子中，它匹 配<td>元素中的任何作为其直接子元素的 <b>元素。两个元素的名称使用一个“大于 号”(>)分隔，指明b是td的子元素，此处该 符号称为“连接符”(combinator)： td>b {}
第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
第8章 CSS3选择器
第21页
UI元素状态伪类

大多数窗体元素都可以启用 、禁用或选中。使用UI元素 状态伪类，可以在这些元素 处于特定状态时选择它们， 例如选中的复选框。下面介 绍基本的登录窗体，看看如 何实现这些元素状态伪类。
正常样式的登录窗体
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器

HTML5+CSS3网页设计实例教程 第8章 CSS3选择器
第25页
否定伪类
最后要介绍的选择器是否定伪类:not()。在 许多方面，它的工作方式与其他选择器相 反，因为它允许选择不匹配选择器的参数 的元素，但它的实用性是相同的——你可 能会愈来愈多地使用它。 一个主要示例是给不是Submit按钮的所有 窗体输入设置样式：
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第5页
主要内容
8.1 8.2 8.3 8.4 8.5 8.6 8.7 选择器概述 选择器 CSS3选择器 浏览器支持 选择器的未来 应用实例 本章小结
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第6页
8.2 选择器

要影响文本呈现的属性，可以使用样式规则将这 些属性应用于元素。使用不同类型的“选择器 ”(selector)指定哪些元素可以应用某一样式规则 。其实有多个方式可以实现该目的，而并非仅能 通过元素名称（这类选择器被称为“简单选择器 ”)，或者使用class特性及id特性的值进行指定 。接下来将详细介绍各种选择方式。
HTML5+CSS3网页设计实例教程
第8章 CSS3选择器
第8页
类型选择器

“类型选择器”(type selector)匹配所有在由逗 号分隔的列表中指定的元素。它使你能够将相同 的规则应用于多个元素。例如，如果需要将相同 的规则应用于不同尺寸的标题元素，下面的规则 将匹配所有h1、h2以及h3元素：h1, h2, h3 {}