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

HTML5+CSS3网页设计实例教程第8章CSS3选择器第8章CSS3选择器本章概述本章的学习目标主要内容HTML5+CSS3网页设计实例教程第8章CSS3选择器第2页本章概述为了使用CSS给元素设置样式，需要指定该元素。输入CSS选择器，就可以在DOM中指定特定的元素。使用CSS3选择器，可以用非常短的标记清晰和灵活地指定元素。而且，新元素状态伪类还允许突出显示动态的状态变化。HTML5+CSS3网页设计实例教程第8章CSS3选择器第3页本章的学习目标掌握选择器的基础知识了解CSS3特性选择器HTML5+CSS3网页设计实例教程第8章CSS3选择器第4页主要内容8.1选择器概述8.2选择器8.3CSS3选择器8.4浏览器支持8.5选择器的未来8.6应用实例8.7本章小结HTML5+CSS3网页设计实例教程第8章CSS3选择器第5页8.1选择器概述W3CSelectorsLevel3模块在2011年9月成为一个推荐标准。它列出了所有的选择器，将近40个，不只是CSS3中的选择器。这是因为，CSS3并不是一个全新的规范，而是建立在CSS1和CSS2.1的基础上。HTML5+CSS3网页设计实例教程第8章CSS3选择器第6页主要内容8.1选择器概述8.2选择器8.3CSS3选择器8.4浏览器支持8.5选择器的未来8.6应用实例8.7本章小结HTML5+CSS3网页设计实例教程第8章CSS3选择器第7页8.2选择器要影响文本呈现的属性，可以使用样式规则将这些属性应用于元素。使用不同类型的“选择器”(selector)指定哪些元素可以应用某一样式规则。其实有多个方式可以实现该目的，而并非仅能通过元素名称（这类选择器被称为“简单选择器”)，或者使用class特性及id特性的值进行指定。接下来将详细介绍各种选择方式。HTML5+CSS3网页设计实例教程第8章CSS3选择器第8页通用选择器“通用选择器”(universalselector)由一个“星号”(*)表示，作用类似于匹配文档中全部元素类型的通配符。*{}如果需要将某个规则应用于全部元素，则可以使用此选择器。某些时候它还被用于设置应用于整个文档的默认值(如font-family和font-size)，除非使用更为具体的选择器指定某一元素中对应的相同属性应使用其他值。HTML5+CSS3网页设计实例教程第8章CSS3选择器第9页类型选择器“类型选择器”(typeselector)匹配所有在由逗号分隔的列表中指定的元素。它使你能够将相同的规则应用于多个元素。例如，如果需要将相同的规则应用于不同尺寸的标题元素，下面的规则将匹配所有h1、h2以及h3元素：h1,h2,h3{}HTML5+CSS3网页设计实例教程第8章CSS3选择器类选择器“类选择器”(classselector)能够将规则与一个(或多个)包含class特性的元素相匹配，该特性的值匹配你在类选择器中指定的值。例如，假设你拥有一个aside元素，其class特性的值为BackgroundNote，如下所示：asideclass=BackgroundNoteThisparagraphcontainsanaside./aside第10页HTML5+CSS3网页设计实例教程第8章CSS3选择器id选择器第11页“id选择器”(idselector)与类选择器的工作方式很类似，只是它作用于id特性。在id特性值前需要使用一个“#”号。因此，一个id特性值为abstract的元素，可以使用如下选择器进行标识：#abstractHTML5+CSS3网页设计实例教程第8章CSS3选择器子选择器“子选择器”(childselector)匹配某一元素的直接子元素。在下面的例子中，它匹配td元素中的任何作为其直接子元素的b元素。两个元素的名称使用一个“大于号”()分隔，指明b是td的子元素，此处该符号称为“连接符”(combinator)：tdb{}第12页HTML5+CSS3网页设计实例教程第8章CSS3选择器后代选择器“后代选择器”(descendantselector)匹配一种元素类型，该元素为另一指定元素的后代元素(或者说嵌套于另一指定元素内)，而并非仅仅是直接子元素。尽管大于号被用于作为子选择器的连接符，但是后代选择器的连接符却是空格。查看以下示例：tableb{}第13页HTML5+CSS3网页设计实例教程第8章CSS3选择器相邻兄弟选择器“相邻兄弟选择器”(adjacentsiblingselector)匹配一种作为其他元素相邻兄弟的元素类型。例如，如果希望使任何一级标题后的第一个段落与其他p元素采用不同样式，可以通过类似如下方式使用相邻兄弟选择器，仅为h1元素后出现的第一个p元素指定规则：h1+p{}第14页HTML5+CSS3网页设计实例教程第8章CSS3选择器一般兄弟选择器“一般兄弟选择器”(generalsiblingselector)匹配其他元素的兄弟元素类型。不过，该元素不必是直接前方相邻的元素。因此，假设有两个p元素同时都是h1元素的兄弟元素，则都会使用如下选择器指定的规则。h1~p{}第15页HTML5+CSS3网页设计实例教程第8章CSS3选择器子选择器与兄弟选择器的用途子选择器与相邻兄弟选择器都很重要，因为它们能够减少在HTML文档中需要添加的class特性的数量。如果决定将每个h1元素后的前两个p元素以粗体显示，就需要回过头为每个h1元素后的第二个p元素添加一个新的class特性。因此，子元素选择器与相邻兄弟选择器为设置文档样式以及使标记更加简洁，增加了很大的灵活性。第16页HTML5+CSS3网页设计实例教程第8章CSS3选择器特性选择器特性选择器能够在选择器中使用元素所包含的特性及其取值。有多种特性选择器可供使用，它们使以复杂方式选择文档中的元素成为可能。第17页使用特性选择器的页面效果HTML5+CSS3网页设计实例教程第8章CSS3选择器第18页主要内容8.1选择器概述8.2选择器8.3CSS3选择器8.4浏览器支持8.5选择器的未来8.6应用实例8.7本章小结HTML5+CSS3网页设计实例教程第8章CSS3选择器第19页8.3CSS3选择器组合器特性和子串选择器UI元素状态伪类Target伪类结构伪类伪元素否定伪类HTML5+CSS3网页设计实例教程第8章CSS3选择器组合器假定读者以前使用过CSS，就肯定遇到过组合器。读者肯定知道后继选择器，该选择器有这个名称，是因为它们会选择出给定元素在文档树中的子元素。简言之，后继组合器可以选择出一个元素中某元素类型的所有实例，例如articlep{...}。第20页HTML5+CSS3网页设计实例教程第8章CSS3选择器特性和子串选择器如果给定的特性存在，最基本的特性选择器就允许设置元素的样式。“Startswith”子串特性选择器“endswith”子串特性选择器“Contains”子串特性选择器第21页HTML5+CSS3网页设计实例教程第8章CSS3选择器UI元素状态伪类大多数窗体元素都可以启用、禁用或选中。使用UI元素状态伪类，可以在这些元素处于特定状态时选择它们，例如选中的复选框。下面介绍基本的登录窗体，看看如何实现这些元素状态伪类。第22页正常样式的登录窗体HTML5+CSS3网页设计实例教程第8章CSS3选择器Target伪类CSS3引入了新的:target伪类。在选中的元素成为链接的活动目标(指向它的URL的片段标识符)时，就可以使用:target。第23页使用CSS3的:target伪类建立带选项卡的界面HTML5+CSS3网页设计实例教程第8章CSS3选择器结构伪类: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:rootHTML5+CSS3网页设计实例教程第8章CSS3选择器伪元素前面简要介绍了::first-letter伪元素，CSS3给伪元素引入了新的双冒号语法(::)，以区分它们和伪类。这个新语法应用于CSS1和CSS2中的如下伪元素：::first-letter::first-line::before::after进一步研究伪元素第25页HTML5+CSS3网页设计实例教程第8章CSS3选择器否定伪类最后要介绍的选择器是否定伪类:not()。在许多方面，它的工作方式与其他选择器相反，因为它允许选择不匹配选择器的参数的元素，但它的实用性是相同的——你可能会愈来愈多地使用它。一个主要示例是给不是Submit按钮的所有窗体输入设置样式：第26页HTML5+CSS3网页设计实例教程第8章CSS3选择器第27页主要内容8.1选择器概述8.2选择器8.3CSS3选择器8.4浏览器支持8.5选择器的未来8.6应用实例8.7本章小结HTML5+CSS3网页设计实例教程第8章CSS3选择器8.4浏览器支持CSS3选择器在IE9+、Firefox3.5+、Chrome4+、Safari4+和Opera10+上获得了完全的支持。IE6、IE7和IE8不支持CSS3选择器，IE7和IE8支持一般同级组合器、:first-child和所有特性选择器，但使用内置的JavaScript或jQuery库编写填充物程序，就可以解决这个问题。第28页HTML5+CSS3网页设计实例教程第8章CSS3选择器第29页主要内容8.1选择器概述8.2选择器8.3CSS3选择器8.4浏览器支持8.5选择器的未来8.6应用实例8.7本章小结HTML5+CSS3网页设计实例教程第8章CSS3选择器第30页8.5选择器的未来尽管本书介绍了CSS3，但CSS4已经有了。它是选择器的规范。SelectorsLevel4Module当前仍是草案，且会定期更新。尽管CSS4还处于其早期阶段，且会有很大的修订，但会从选择器规范中删除一些选择器，并添加一些选择器。删除的选择器包括伪元素，因为它们会放在其他规范中。HTML5+CSS3网页设计实例教程第8章CSS3选择器第31页主要内容8.1选择器概述8.2选择器8.3CSS3选择器8.4浏览器支持8.5选择器的未来8.6应用实例8.7本章小结HTML5+CSS3网页设计实例教程第8章CSS3选择器8.6应用实例第32页CSS的简单应用的页面浏览效果HTML5+CSS3网页设计实例教程第8章CSS3选择器第33页主要内容8.1选择器概述8.2选择器8.3CSS3选择器8.4浏览器支持8.5选择器的未来8.6应用实例8.7本章小结HTML5+CSS3网页设计实例教程第8章CSS3选择器8.7本章小结本章介绍了CSS3特性选择器、结构元素状态，:target以及否定伪类。然后简要论述CSS2.1中生成内容的伪元素:before和:after，了解它们如何与HTML5的内容相结合，并介绍CSS3中新的双冒号语法。使用强大的CSS3选择器，就不必在标记中添加必要的类和ID，但能将内容和显示方式彼此分开。第34页