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

1、第8章 CSS3选择器本章概述 本章的学习目标主要内容第2页本章概述为了使用CSS给元素设置样式，需要指定该元素。输入CSS选择器，就可以在DOM中指定特定的元素。使用CSS3选择器，可以用非常短的标记清晰和灵活地指定元素。而且，新元素状态伪类还允许突出显示动态的状态变化。第3页本章的学习目标掌握选择器的基础知识了解CSS3特性选择器第4页主要内容8.1 选择器概述8.2 选择器8.3 CSS3选择器8.4 浏览器支持8.5 选择器的未来8.6 应用实例8.7 本章小结第5页8.1 选择器概述W3C Selectors Level 3模块在2011年9月成为一个推荐标准。它列出了所有的选择器，

2、将近40个，不只是CSS3中的选择器。这是因为，CSS3并不是一个全新的规范，而是建立在CSS 1 和 CSS 2.1的基础上。第6页主要内容8.1 选择器概述8.2 选择器8.3 CSS3选择器8.4 浏览器支持8.5 选择器的未来8.6 应用实例8.7 本章小结第7页8.2 选择器要影响文本呈现的属性，可以使用样式规则将这些属性应用于元素。使用不同类型的“选择器”(selector)指定哪些元素可以应用某一样式规则。其实有多个方式可以实现该目的，而并非仅能通过元素名称（这类选择器被称为“简单选择器”)，或者使用class特性及id特性的值进行指定。接下来将详细介绍各种选择方式。第8页通用选

3、择器“通用选择器”(universal selector)由一个“星号”(*)表示，作用类似于匹配文档中全部元素类型的通配符。*如果需要将某个规则应用于全部元素，则可以使用此选择器。某些时候它还被用于设置应用于整个文档的默认值(如font-family和font-size)，除非使用更为具体的选择器指定某一元素中对应的相同属性应使用其他值。第9页类型选择器“类型选择器”(type selector)匹配所有在由逗号分隔的列表中指定的元素。它使你能够将相同的规则应用于多个元素。例如，如果需要将相同的规则应用于不同尺寸的标题元素，下面的规则将匹配所有h1、h2以及h3元素：h1, h2, h3 类

4、选择器“类选择器”(class selector)能够将规则与一个(或多个)包含class特性的元素相匹配，该特性的值匹配你在类选择器中指定的值。例如，假设你拥有一个元素，其class特性的值为BackgroundNote，如下所示：This paragraph contains an aside.第10页id选择器第11页“id选择器”(id selector)与类选择器的工作方式很类似，只是它作用于id特性。在id特性值前需要使用一个“#”号。因此，一个id特性值为abstract的元素，可以使用如下选择器进行标识：#abstract子选择器“子选择器”(child selector)匹配

5、某一元素的直接子元素。在下面的例子中，它匹配元素中的任何作为其直接子元素的元素。两个元素的名称使用一个“大于号”()分隔，指明b是td的子元素，此处该符号称为“连接符”(combinator)：tdb 第12页后代选择器“后代选择器”(descendant selector)匹配一种元素类型，该元素为另一指定元素的后代元素(或者说嵌套于另一指定元素内)，而并非仅仅是直接子元素。尽管大于号被用于作为子选择器的连接符，但是后代选择器的连接符却是空格。查看以下示例：table b 第13页相邻兄弟选择器“相邻兄弟选择器”(adjacent sibling selector)匹配一种作为其他元素相邻兄

6、弟的元素类型。例如，如果希望使任何一级标题后的第一个段落与其他元素采用不同样式，可以通过类似如下方式使用相邻兄弟选择器，仅为元素后出现的第一个元素指定规则：h1+p 第14页一般兄弟选择器“一般兄弟选择器”(general sibling selector)匹配其他元素的兄弟元素类型。不过，该元素不必是直接前方相邻的元素。因此，假设有两个元素同时都是元素的兄弟元素，则都会使用如下选择器指定的规则。h1p 第15页子选择器与兄弟选择器的用途子选择器与相邻兄弟选择器都很重要，因为它们能够减少在HTML文档中需要添加的class特性的数量。如果决定将每个元素后的前两个元素以粗体显示，就需要回过头为每

7、个元素后的第二个元素添加一个新的class特性。因此，子元素选择器与相邻兄弟选择器为设置文档样式以及使标记更加简洁，增加了很大的灵活性。第16页特性选择器特性选择器能够在选择器中使用元素所包含的特性及其取值。有多种特性选择器可供使用，它们使以复杂方式选择文档中的元素成为可能。第17页使用特性选择器的页面效果第18页主要内容8.1 选择器概述8.2 选择器8.3 CSS3选择器8.4 浏览器支持8.5 选择器的未来8.6 应用实例8.7 本章小结第19页8.3 CSS3选择器组合器特性和子串选择器UI元素状态伪类Target伪类结构伪类伪元素否定伪类组合器假定读者以前使用过CSS，就肯定遇到过组

8、合器。读者肯定知道后继选择器，该选择器有这个名称，是因为它们会选择出给定元素在文档树中的子元素。简言之，后继组合器可以选择出一个元素中某元素类型的所有实例，例如article p .。第20页特性和子串选择器如果给定的特性存在，最基本的特性选择器就允许设置元素的样式。“Starts with” 子串特性选择器“ends with” 子串特性选择器“Contains” 子串特性选择器第21页UI元素状态伪类大多数窗体元素都可以启用、禁用或选中。使用UI元素状态伪类，可以在这些元素处于特定状态时选择它们，例如选中的复选框。下面介绍基本的登录窗体，看看如何实现这些元素状态伪类。第22页正常样式的登录

9、窗体Target伪类CSS3引入了新的:target伪类。在选中的元素成为链接的活动目标(指向它的URL的片段标识符)时，就可以使用:target。第23页使用CSS3的:target伪类建立带选项卡的界面结构伪类:first-child:last-child:nth-child:nth-last-child:only-child:first-of-type第24页:last-of-type:nth-of-type:nth-last-of-type:only-of-type :empty:root伪元素前面简要介绍了:first-letter伪元素，CSS3给伪元素引入了新的双冒号语法(:)，

10、以区分它们和伪类。这个新语法应用于CSS 1和CSS2中的如下伪元素：:first-letter :first-line:before :after进一步研究伪元素第25页否定伪类最后要介绍的选择器是否定伪类:not()。在许多方面，它的工作方式与其他选择器相反，因为它允许选择不匹配选择器的参数的元素，但它的实用性是相同的你可能会愈来愈多地使用它。一个主要示例是给不是Submit按钮的所有窗体输入设置样式：第26页第27页主要内容8.1 选择器概述8.2 选择器8.3 CSS3选择器8.4 浏览器支持8.5 选择器的未来8.6 应用实例8.7 本章小结8.4 浏览器支持CSS3选择器在IE9+

11、、Firefox 3.5+、Chrome 4+、Safari 4+和Opera 10+上获得了完全的支持。IE6、IE7和IE8不支持CSS3选择器，IE7和IE8支持一般同级组合器、:first-child和所有特性选择器，但使用内置的JavaScript或jQuery库编写填充物程序，就可以解决这个问题。第28页第29页主要内容8.1 选择器概述8.2 选择器8.3 CSS3选择器8.4 浏览器支持8.5 选择器的未来8.6 应用实例8.7 本章小结第30页8.5 选择器的未来尽管本书介绍了CSS3，但CSS4已经有了。它是选择器的规范。Selectors Level 4 Module当前仍是草案，且会定期更新。尽管CSS4还处于其早期阶段，且会有很大的修订，但会从选择器规范中删除一些选择器，并添加一些选择器。删除的选择器包括伪元素，因为它们会放在其他规范中。第31页主要内容8.1 选择器概述8.2 选择器8.3 CSS3选择器8.4 浏览器支持8.5 选择器的未来8.6 应用实例8.7 本章小结8.6 应用实例第32页CSS的简单应用的页面浏览效果第33页主要内容8.1 选择器概述8.2 选择器8.3 CSS3选择器8.4 浏览器支持8.5 选择器