HTML+CSS+JavaScript网页设计-第7章-CSS选择器.ppt

1、HTML+CSS+JavaScript网页设计第7章CSS选择器第1页第第7章章CSS选择器选择器本章概述 本章的学习目标主要内容HTML+CSS+JavaScript网页设计第7章CSS选择器第2页本章概述本章概述l选择器是选择器是CSS中十分重要的内容。使用它中十分重要的内容。使用它可以大幅提高开发人员书写及修改样式表可以大幅提高开发人员书写及修改样式表时的工作效率。时的工作效率。CSS支持很多选择器，学支持很多选择器，学会并掌握这些选择器的使用是使用会并掌握这些选择器的使用是使用CSS美美化网页的基础。本章将详细介绍各类选择化网页的基础。本章将详细介绍各类选择器的语法规则和使用技巧，通过

2、本章的学器的语法规则和使用技巧，通过本章的学习读者应能够使用习读者应能够使用CSS选择器过滤出网页选择器过滤出网页中的任意指定元素。中的任意指定元素。HTML+CSS+JavaScript网页设计第7章CSS选择器第3页本章的学习目标本章的学习目标l掌握标签选择器、类选择器和掌握标签选择器、类选择器和ID选择器的选择器的用法用法l掌握属性选择器的用法掌握属性选择器的用法l掌握派生选择器的用法掌握派生选择器的用法l掌握伪元素选择器的用法掌握伪元素选择器的用法l掌握伪类选择器的用法掌握伪类选择器的用法HTML+CSS+JavaScript网页设计第7章CSS选择器第4页主要内容主要内容7.1 基本

3、选择器基本选择器7.2 属性选择器属性选择器7.3 派生选择器派生选择器7.4 伪元素选择器伪元素选择器7.5 伪类选择器伪类选择器7.6 本章小结本章小结7.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第7章CSS选择器第5页7.1 基本选择器基本选择器lCSS主要的作用就是给网页中的元素设置主要的作用就是给网页中的元素设置样式，选择器则是用来匹配元素的。所有样式，选择器则是用来匹配元素的。所有HTML标签都是通过不同的标签都是通过不同的CSS选择器进行选择器进行控制的。用户只需要通过选择器，就可以控制的。用户只需要通过选择器，就可以对不同的对不同的HTML元素进行

4、选择，并赋予各种元素进行选择，并赋予各种样式的声明，即可实现各种美化网页的效样式的声明，即可实现各种美化网页的效果。果。lCSS支持很多选择器，最基本的选择器有支持很多选择器，最基本的选择器有标签选择器、类选择器和标签选择器、类选择器和ID选择器。选择器。HTML+CSS+JavaScript网页设计第7章CSS选择器第6页标签选择器标签选择器l标签选择器是直接将标签选择器是直接将HTML标签作为选择器标签作为选择器，上一章中的示例中主要用到的就是标签，上一章中的示例中主要用到的就是标签选择器。选择器。l标签选择器一旦声明，页面中所有的该标标签选择器一旦声明，页面中所有的该标签都会相应的应用这

5、些规则，如果要将相签都会相应的应用这些规则，如果要将相同的规则应用于多个标签，则可以用逗号同的规则应用于多个标签，则可以用逗号分隔多个标签分隔多个标签 h1,h2,h3 color:#FABB1D HTML+CSS+JavaScript网页设计第7章CSS选择器第7页通用通用选择器选择器l一个比较特殊的标签选择器是通用选择器，它是一个比较特殊的标签选择器是通用选择器，它是由一个由一个“星号星号”(*)表示，匹配文档中全部标签。表示，匹配文档中全部标签。如果需要将某个规则应用于全部元素，则可以使如果需要将某个规则应用于全部元素，则可以使用通用选择器。用通用选择器。*l有些时候，通用选择器还被用于

6、设置应用于整个有些时候，通用选择器还被用于设置应用于整个文档的默认值文档的默认值(如如font-family和和font-size)。这种。这种做法与对做法与对元素应用默认样式稍有不同，因元素应用默认样式稍有不同，因为通用选择器应用于每一个元素，而不依赖从应为通用选择器应用于每一个元素，而不依赖从应用于用于元素的规则中继承的属性。元素的规则中继承的属性。HTML+CSS+JavaScript网页设计第7章CSS选择器第8页类选择器类选择器l类选择器能够将规则与一个或多个包含类选择器能够将规则与一个或多个包含class属性的元素相匹配，该属性的值匹配属性的元素相匹配，该属性的值匹配类选择器中指定

7、的值。类选择器的语法规类选择器中指定的值。类选择器的语法规则很简单，就是在英文句号后面加上所选则很简单，就是在英文句号后面加上所选择的类名择的类名.nature color:green;h1标题应用类选择器标题应用类选择器 段落应用类选择器段落应用类选择器HTML+CSS+JavaScript网页设计第7章CSS选择器第9页ID选择器选择器lID选择器与类选择器的工作方式很类似，选择器与类选择器的工作方式很类似，只是它作用于只是它作用于HTML元素的元素的id属性。相比于属性。相比于类选择器是在类选择器是在class属性值前添加一个句号属性值前添加一个句号，ID选择器使用的是选择器使用的是“#

8、”号。例如，一个号。例如，一个id属性值为属性值为btnLogin的元素，可以使用如的元素，可以使用如下选择器进行标识。下选择器进行标识。#btnLoginHTML+CSS+JavaScript网页设计第7章CSS选择器第10页主要内容主要内容7.1 基本选择器基本选择器7.2 属性选择器属性选择器7.3 派生选择器派生选择器7.4 伪元素选择器伪元素选择器7.5 伪类选择器伪类选择器7.6 本章小结本章小结7.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第7章CSS选择器第11页7.2 属性选择器属性选择器l属性选择器是属性选择器是CSS 2开始引入的，开始引入的，

9、CSS 3在在CSS 2的基础上新增加了的基础上新增加了3个属性选择器。个属性选择器。lCSS 2定义了以下定义了以下4个属性选择器：选取带个属性选择器：选取带有指定属性的元素、选取带有指定属性和有指定属性的元素、选取带有指定属性和值的元素、选取属性值中包含指定词汇的值的元素、选取属性值中包含指定词汇的元素、选取带有以指定值开头的属性值的元素、选取带有以指定值开头的属性值的元素，该值必须是整个单词。元素，该值必须是整个单词。HTML+CSS+JavaScript网页设计第7章CSS选择器第12页选取带有指定属性的元素选取带有指定属性的元素l选取带有指定属性的元素，而不论属性的值是什选取带有指定

10、属性的元素，而不论属性的值是什么，这是最简单的一种属性选择器。么，这是最简单的一种属性选择器。l例如，下面的规则将把所有包含例如，下面的规则将把所有包含title属性的元素属性的元素变为红色：变为红色：*title color:red;l这里使用了通用选择器选择所有标签，然后在过这里使用了通用选择器选择所有标签，然后在过滤出包含滤出包含title属性的元素。属性的元素。l也可以限定具体的标签类型，如对包含也可以限定具体的标签类型，如对包含href属性属性的超链接设置样式：的超链接设置样式：ahref color:red;HTML+CSS+JavaScript网页设计第7章CSS选择器第13页指

11、定属性和值指定属性和值l除了选择拥有某些属性的元素，还可以进一步缩除了选择拥有某些属性的元素，还可以进一步缩小选择范围，限定属性的具体值。小选择范围，限定属性的具体值。l例如，只将指向清华大学的超链接变成红色，可例如，只将指向清华大学的超链接变成红色，可以这样编写规则：以这样编写规则：ahref=http:/ color:red;l与简单属性选择器类似，如果要限定多个属性的与简单属性选择器类似，如果要限定多个属性的具体值，可以把多个属性具体值，可以把多个属性-值选择器链接在一起。值选择器链接在一起。ahref=http:/ title=清华清华大学大学color:red;l需要注意的是，这种格

12、式要求属性的值完全匹配需要注意的是，这种格式要求属性的值完全匹配HTML+CSS+JavaScript网页设计第7章CSS选择器第14页根据部分属性值选择根据部分属性值选择l如果需要根据属性值中的词列表的某个词进行选如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号择，则需要使用波浪号()。这是的属性值必须是。这是的属性值必须是一个以空格符分隔的列表，属性选择器中指定的一个以空格符分隔的列表，属性选择器中指定的是其中的一个值。例如：是其中的一个值。例如：atitle=bar font-size:20pxl对于下面的两个超链接，只有第对于下面的两个超链接，只有第1个可以匹配：个可以匹

13、配：HTML+CSS+JavaScript网页设计第7章CSS选择器第15页特殊的属性选择器特殊的属性选择器l这类属性选择器要求属性的值是一个以连这类属性选择器要求属性的值是一个以连字符字符(-)分隔的列表，通过第一个连字符前分隔的列表，通过第一个连字符前面的值来匹配，例如：面的值来匹配，例如：*lang|=en color:red;l上面这个规则会选择上面这个规则会选择lang属性等于属性等于en或以或以en-开头的所有元素。开头的所有元素。Hello!Greetings!Gday!HTML+CSS+JavaScript网页设计第7章CSS选择器第16页CSS 3定义的属性选择器定义的属性选

14、择器lCSS 3遵循通用编码规则，选用遵循通用编码规则，选用、$和和*这这3个通个通用匹配运算符，其中用匹配运算符，其中表示匹配起始符，表示匹配起始符，$表示匹表示匹配终止符，配终止符，*表示匹配任意字符，使用它们更符合表示匹配任意字符，使用它们更符合编码习惯和惯用编程思想。编码习惯和惯用编程思想。abc=def：选择：选择abc属性值以属性值以“def”开头的所有开头的所有元素，该选择器可以替代前面的元素，该选择器可以替代前面的abc|=def形式的选形式的选择器。择器。abc$=def：选择：选择abc属性值以属性值以“def”结尾的所有结尾的所有元素。元素。abc*=def：选择：选择a

15、bc属性值中包含子串属性值中包含子串“def”的的所有元素，该选择器可替代前面的所有元素，该选择器可替代前面的abc=def形式形式的选择器。的选择器。HTML+CSS+JavaScript网页设计第7章CSS选择器第17页主要内容主要内容7.1 基本选择器基本选择器7.2 属性选择器属性选择器7.3 派生选择器派生选择器7.4 伪元素选择器伪元素选择器7.5 伪类选择器伪类选择器7.6 本章小结本章小结7.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第7章CSS选择器第18页7.3 派生选择器派生选择器l通过依据元素在其位置的上下文关系来定义样式，可以使通过依据元素

16、在其位置的上下文关系来定义样式，可以使标记更加简洁。在标记更加简洁。在CSS1中，通过这种方式来应用规则的中，通过这种方式来应用规则的选择器称为上下文选择器选择器称为上下文选择器(contextual selectors)，这是，这是由于它们依赖于上下文关系来应用或者避免某项规则。在由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中，它们称为派生选择器，但是无论如何称呼它们中，它们称为派生选择器，但是无论如何称呼它们，它们的作用都是相同的。，它们的作用都是相同的。l派生选择器根据文档的上下文关系来确定某个标签的样式派生选择器根据文档的上下文关系来确定某个标签的样式，根据上下文关系的不

17、同，派生选择器又包括子选择器、，根据上下文关系的不同，派生选择器又包括子选择器、后代选择器、相邻兄弟选择器和一般兄弟选择器。合理地后代选择器、相邻兄弟选择器和一般兄弟选择器。合理地使用派生选择器，可以使使用派生选择器，可以使 HTML 代码变得更加整洁。代码变得更加整洁。HTML+CSS+JavaScript网页设计第7章CSS选择器第19页子选择器子选择器l“子选择器子选择器”(child selector)只能匹配某只能匹配某一元素的直接子元素。子选择器的写法是一元素的直接子元素。子选择器的写法是使用一个使用一个“大于号大于号”()分隔父子元素，父分隔父子元素，父元素在前，子元素在后。元素

18、在前，子元素在后。l例如，下面的规则将把例如，下面的规则将把的直接子元素的直接子元素为为元素的文本设置为红色：元素的文本设置为红色：h1 strong color:red;HTML+CSS+JavaScript网页设计第7章CSS选择器第20页后代后代选择器选择器l“后代选择器后代选择器”(descendant selector)又称为包含选择又称为包含选择器。可以选择作为某元素后代的元素，该元素嵌套于另一器。可以选择作为某元素后代的元素，该元素嵌套于另一指定元素内，而并非仅仅是直接子元素。这与子选择器形指定元素内，而并非仅仅是直接子元素。这与子选择器形成了对比，后代选择器选中的元素包含直接子

19、元素和非直成了对比，后代选择器选中的元素包含直接子元素和非直接子元素。接子元素。l在写法上，子选择器的连接符是在写法上，子选择器的连接符是“大于号大于号”()，而后代，而后代选择器的连接符是空格。例如，上面提到的无意义的子选选择器的连接符是空格。例如，上面提到的无意义的子选择器，改成后代选择器就有意义了：择器，改成后代选择器就有意义了：table b l该选择器匹配该选择器匹配元素中的任何元素中的任何子元素，这意味子元素，这意味着该规则将应用于着该规则将应用于及及元素二者中的全部元素二者中的全部元素元素。HTML+CSS+JavaScript网页设计第7章CSS选择器第21页后代后代选择器选择

20、器l后代选择器和子选择器也可以结合起来使用，下后代选择器和子选择器也可以结合起来使用，下面的这个选择器会选择作为面的这个选择器会选择作为 元素直接子元素元素直接子元素的所有的所有元素，这个元素，这个元素本身从元素本身从class属性属性为为company 的的元素继承的。元素继承的。pany td p l分析这个选择器时，首先把它从空格处分成两部分析这个选择器时，首先把它从空格处分成两部分，也就是说它是一个后代选择器，前面的部分分，也就是说它是一个后代选择器，前面的部分是类选择器是类选择器pany，后面的部分是子选，后面的部分是子选择器择器tdp。HTML+CSS+JavaScript网页设计

21、第7章CSS选择器第22页相邻兄弟相邻兄弟选择器选择器l“相邻兄弟选择器相邻兄弟选择器”(adjacent sibling selector)可选择紧接在另一元素后的元素可选择紧接在另一元素后的元素，且二者有相同的父元素。，且二者有相同的父元素。l相邻兄弟选择器使用加号相邻兄弟选择器使用加号(+)作为连接符。作为连接符。l例如，下面的规则用来增加紧接在例如，下面的规则用来增加紧接在元元素后出现的段落的上边距：素后出现的段落的上边距：h1+p margin-top:50px;HTML+CSS+JavaScript网页设计第7章CSS选择器第23页一般一般兄弟兄弟选择器选择器l“一般兄弟选择器一般

22、兄弟选择器”(general sibling selector)可以选择出现在另一元素后面的元素，只要二者可以选择出现在另一元素后面的元素，只要二者具有相同的父元素即可，该元素不必是直接前方具有相同的父元素即可，该元素不必是直接前方相邻的元素。相邻的元素。l一般兄弟选择器是一般兄弟选择器是CSS 3中的一部分，它使用波中的一部分，它使用波浪号浪号()作为连接符。例如，【例作为连接符。例如，【例7-2】的第一个】的第一个规则如果使用一般兄弟选择器，则规则如果使用一般兄弟选择器，则元素后元素后面的两个段落都会被应用该规则：面的两个段落都会被应用该规则：divp background-color:y

23、ellow;HTML+CSS+JavaScript网页设计第7章CSS选择器第24页主要内容主要内容7.1 基本选择器基本选择器7.2 属性选择器属性选择器7.3 派生选择器派生选择器7.4 伪元素选择器伪元素选择器7.5 伪类选择器伪类选择器7.6 本章小结本章小结7.7 思考和练习思考和练习HTML+CSS+JavaScript网页设计第7章CSS选择器7.4 伪元素选择器伪元素选择器lCSS伪元素是用来添加一些选择器的特殊效果。伪元素是伪元素是用来添加一些选择器的特殊效果。伪元素是对元素中的特定内容进行操作。实际上，设计伪元素的目对元素中的特定内容进行操作。实际上，设计伪元素的目的就是去

24、选取诸如元素内容第一个字的就是去选取诸如元素内容第一个字(母母)、第一行，选取、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素，这样于元素的抽象，并不存在于文档中，所以叫伪元素，这样的选择器称为伪元素选择器。的选择器称为伪元素选择器。l在在CSS 1中有两个位元素：中有两个位元素：:first-letter和和:first-line；CSS 2又增加了一对：又增加了一对：:before和

25、和:after；CSS 3引入了一引入了一个新的伪元素个新的伪元素:selection。所以，目前一共有。所以，目前一共有5个伪元素个伪元素。第25页HTML+CSS+JavaScript网页设计第7章CSS选择器:first-letter和和:first-linel:first-letter伪元素用来向文本的第一个字伪元素用来向文本的第一个字母添加特殊样式。所有前导标点符号母添加特殊样式。所有前导标点符号(如引如引号号)应当与第一个字母一同应用该样式。应当与第一个字母一同应用该样式。l在在 CSS 2.1之前，之前，:first-letter只能与块级只能与块级元素关联。元素关联。CSS 2

26、.1 扩大了这个范围，可扩大了这个范围，可以与任何元素关联。以与任何元素关联。l:first-line伪元素用于向文本的首行添加特伪元素用于向文本的首行添加特殊样式，而不论该行出现多少单词。殊样式，而不论该行出现多少单词。:first-line 只能与块级元素关联。只能与块级元素关联。第26页HTML+CSS+JavaScript网页设计第7章CSS选择器:before和和:afterl:before和和:after也是一对非常有用的伪元素，在也是一对非常有用的伪元素，在CSS3中，他们会写成中，他们会写成:before和和:after的样式。的样式。它们用于在元素之前或之后增加内容，其中，它

27、们用于在元素之前或之后增加内容，其中，“在元素的内容之后在元素的内容之后”需要特别注意，这意味着，需要特别注意，这意味着，对于有空内容模式的元素，例如对于有空内容模式的元素，例如或或，不能使用，不能使用:before和和:after。l这两个伪元素基本上总是与这两个伪元素基本上总是与CSS 2的属性的属性content一同使用，用于插入动态生成的内容。一同使用，用于插入动态生成的内容。content可以用于指定对象，例如图像，也可以用于指定可以用于指定对象，例如图像，也可以用于指定一般的文本内容。一般的文本内容。第27页HTML+CSS+JavaScript网页设计第7章CSS选择器:sele

28、ctionlCSS 3引入了伪元素引入了伪元素:selection，:selection选择器匹配元素中被用户选中选择器匹配元素中被用户选中或处于高亮状态的部分。或处于高亮状态的部分。l:selection只可以应用于少数的只可以应用于少数的CSS属性属性：color,background,cursor,和和outline。第28页HTML+CSS+JavaScript网页设计第7章CSS选择器第29页主要内容主要内容7.1 基本选择器基本选择器7.2 属性选择器属性选择器7.3 派生选择器派生选择器7.4 伪元素选择器伪元素选择器7.5 伪类选择器伪类选择器7.6 本章小结本章小结7.7 思

29、考和练习思考和练习HTML+CSS+JavaScript网页设计第7章CSS选择器7.5 伪类选择器伪类选择器l与伪元素相似，伪类允许与伪元素相似，伪类允许CSS选择器为没选择器为没有样式组合的相关联的文档树的多个部分有样式组合的相关联的文档树的多个部分指定样式。最常见的伪类主要是应用于链指定样式。最常见的伪类主要是应用于链接状态和接状态和UI元素状态的，在元素状态的，在CSS 3中，又中，又增加了一些结构伪类，它们利用增加了一些结构伪类，它们利用DOM树实树实现元素过滤，通过文档结构的相互关系来现元素过滤，通过文档结构的相互关系来匹配元素，可以减少匹配元素，可以减少class和和id属性的定

30、义属性的定义，使文档变得更加简洁。，使文档变得更加简洁。第30页HTML+CSS+JavaScript网页设计第7章CSS选择器与链接相关的动态伪类与链接相关的动态伪类l在支持在支持CSS的浏览器中，链接的不同状态都可以的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态、已不同的方式显示，这些状态包括：活动状态、已被访问状态、未被访问状态和鼠标悬停状态。分被访问状态、未被访问状态和鼠标悬停状态。分别可以通过如下别可以通过如下4个伪类选择器来控制：个伪类选择器来控制：a:link color:#FF0000/*未访问的链接未访问的链接*/a:visited color:#00

31、FF00/*已访问的链接已访问的链接*/a:hover color:#FF00FF/*鼠标移动到链接上鼠标移动到链接上*/a:active color:#0000FF/*选定的链接选定的链接*/第31页HTML+CSS+JavaScript网页设计第7章CSS选择器与链接相关的动态伪类与链接相关的动态伪类l伪类名称对大小写不敏感，在使用链接伪类选择伪类名称对大小写不敏感，在使用链接伪类选择器时需要注意以下两点：器时需要注意以下两点：la:hover必须被置于必须被置于a:link和和a:visited之后才有效之后才有效la:active必须被置于必须被置于a:hover之后才有效之后才有效l

32、除了以上除了以上4个伪类选择器，个伪类选择器，CSS 3中还增加了一个中还增加了一个与链接相关的伪类与链接相关的伪类:target。l:target用于在一个元素是链接目标，并且文档的用于在一个元素是链接目标，并且文档的当前当前URL有片段标识符时对其施加样式。有片段标识符时对其施加样式。#top:target background-color:green;第32页HTML+CSS+JavaScript网页设计第7章CSS选择器UI元素相关的伪类元素相关的伪类lUI元素相关的伪类是针对于元素相关的伪类是针对于HTML中的表单元素中的表单元素进行操作，包括一些状态伪类进行操作，包括一些状态伪类(

33、只有在元素处于某只有在元素处于某种状态时才起作用种状态时才起作用)和有效性验证伪类和有效性验证伪类(验证用户验证用户输入的值是否有效输入的值是否有效)。lUI元素的状态一般包括：启用、禁用、选中、未元素的状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、只读、锁定和待机选中、获得焦点、失去焦点、只读、锁定和待机等。在等。在HTML元素中有可用和不可用状态，例如元素中有可用和不可用状态，例如表单中的文本输入框；在表单中的文本输入框；在HTML元素中还有选中元素中还有选中和未选中状态，例如表单中的复选框和单选按钮和未选中状态，例如表单中的复选框和单选按钮。这几种状态都是。这几种状态都是C

34、SS 3选择器中常用的状态伪选择器中常用的状态伪类选择器。类选择器。第33页HTML+CSS+JavaScript网页设计第7章CSS选择器UI元素相关的伪类元素相关的伪类l在在CSS中，用于中，用于UI元素状态的伪类有：元素状态的伪类有：:focus、:enabled、:disabled、:checked、:read-only:read-write、:default和和:indeterminate。另外还。另外还有前面学过的有前面学过的:hover和和:active，他们除了用于，他们除了用于元素，同样可以用于元素，同样可以用于UI元素。元素。l用于用于UI元素值的有效性验证的伪类有：元素值

35、的有效性验证的伪类有：:invalid、:valid、:required、:optional、:in-range和和:out-of-range。第34页HTML+CSS+JavaScript网页设计第7章CSS选择器:focusl:focus选择器被用来指定元素获得焦点时选择器被用来指定元素获得焦点时使用的样式，主要在文本框控件获得焦点使用的样式，主要在文本框控件获得焦点并进行文字输入时使用。并进行文字输入时使用。l使用时可以结合属性选择器，例如下面的使用时可以结合属性选择器，例如下面的规则只对文本框控件获得焦点时应用规则规则只对文本框控件获得焦点时应用规则，而密码框控件则不应有该规则：，而密

36、码框控件则不应有该规则：inputtype=text:focus background:#ff6600;color:#fff;第35页HTML+CSS+JavaScript网页设计第7章CSS选择器:enabled和和:disabledl:enabled选择器被用来指定当元素处于可选择器被用来指定当元素处于可用状态时的样式；用状态时的样式；:disabled选择器被用来选择器被用来指定当元素处于不可用状态时的样式。指定当元素处于不可用状态时的样式。l:read-only选择器被用来指定当元素处于只选择器被用来指定当元素处于只读状态时的样式；读状态时的样式；:read-write选择器被用选择器

37、被用来指定当元素处于非只读状态时的样式。来指定当元素处于非只读状态时的样式。第36页HTML+CSS+JavaScript网页设计第7章CSS选择器:checked和和:indeterminatel这这2个伪类主要应用于单选按钮和复选框元个伪类主要应用于单选按钮和复选框元素。素。:checked伪类选择器用来指定当表单伪类选择器用来指定当表单中的单选按钮或复选框处于选中状态时的中的单选按钮或复选框处于选中状态时的样式。样式。l:indeterminate选择器有如下选择器有如下3种应用场景种应用场景表单中拥有相同表单中拥有相同name值的所有单选按钮都未值的所有单选按钮都未被选中时被选中时in

38、determinate属性被属性被JavaScript设置为设置为true 的复选框控件的复选框控件处于不确定状态的处于不确定状态的progress元素元素第37页HTML+CSS+JavaScript网页设计第7章CSS选择器:defaultl:default选择器可以在选择器可以在、以及以及 上使用。上使用。l允许多个选择的分组元素也可以具有多个允许多个选择的分组元素也可以具有多个默认值，即它们可以具有最初选择的多个默认值，即它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用项目。在这种情况下，所有默认值都使用:default 伪类表示。伪类表示。第38页HTML+CSS+Ja

39、vaScript网页设计第7章CSS选择器:invalid和和:validl:invalid选择器用于在表单元素中输入非法选择器用于在表单元素中输入非法值时设置指定样式。值时设置指定样式。:valid伪类选择器的作伪类选择器的作用和用和:invalid恰好相反，用来指定当元素中恰好相反，用来指定当元素中输入的内容通过所指定的检查，或元素内输入的内容通过所指定的检查，或元素内容符合元素规定的格式时的样式。容符合元素规定的格式时的样式。l这两个选择器只作用于能指定区间值的元这两个选择器只作用于能指定区间值的元素，例如素，例如input元素中的元素中的min和和max属性，属性，及正确的及正确的em

40、ail字段字段,合法的数字字段等。合法的数字字段等。第39页HTML+CSS+JavaScript网页设计第7章CSS选择器:required和和:optionall:required选择器用来指定允许使用选择器用来指定允许使用required属性，而且已经指定属性，而且已经指定required属属性的性的input元素、元素、select元素以及元素以及textarea元素的样式。元素的样式。l:optional选择器用来指定允许使用选择器用来指定允许使用required属性，但是未指定属性，但是未指定required属性属性的的input元素、元素、select元素以及元素以及textar

41、ea元元素的样式。素的样式。第40页HTML+CSS+JavaScript网页设计第7章CSS选择器:in-range和和:out-of-rangel:in-range选择器用来指定当元素的有效值选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。在该范围之内时的样式。l:out-of-range选择器用来指定当元素的有选择器用来指定当元素的有效值被限定在一段范围之内，但实际的输效值被限定在一段范围之内，但实际的输入值超出该范围时使用的样式。入值超出该范围时使用的样式。第41页HTML+CSS+JavaScript网页设计第

42、7章CSS选择器结构伪类结构伪类l结构伪类选择器利用结构伪类选择器利用DOM树实现元素过滤，通过树实现元素过滤，通过文档结构的相互关系来匹配元素，可以减少文档结构的相互关系来匹配元素，可以减少class和和id属性的定义，使文档变得更加简洁。属性的定义，使文档变得更加简洁。lroot将样式绑定到页面的根元素。所谓根元素，将样式绑定到页面的根元素。所谓根元素，是指位于文档树中最顶层结构的元素，在是指位于文档树中最顶层结构的元素，在HTML页面中根元素始终是页面中根元素始终是元素。元素。l:empty用来选择没有任何内容的元素，这里没有用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，

43、哪怕是一个空格都内容指的是一点内容都没有，哪怕是一个空格都不行。不行。第42页HTML+CSS+JavaScript网页设计第7章CSS选择器:first-child和和:last-childl:first-child选择器用来选择第一个子元素选择器用来选择第一个子元素(所有的第一个子元素都会被选择所有的第一个子元素都会被选择)。:last-child选择器与选择器与:first-child选择器的作用类选择器的作用类似，不同的是似，不同的是:last-child选择是的元素的最选择是的元素的最后一个子元素。后一个子元素。第43页HTML+CSS+JavaScript网页设计第7章CSS选择器

44、:nth-child(n)和和:nth-last-child(n)l:nth-child(n)用来定位父元素的一个或多个特定的子元素。其中用来定位父元素的一个或多个特定的子元素。其中“n”是参数，可以是整数值，也可以是表达式是参数，可以是整数值，也可以是表达式(2n+1、-n+5等等)和关键词和关键词(odd、even等等)，参数，参数n的起始值始终是的起始值始终是1。也就是说，参数。也就是说，参数n的值为的值为0时，选择器将选择不到任何匹配的元素。下面的选择器将匹配表格中时，选择器将选择不到任何匹配的元素。下面的选择器将匹配表格中相应的行相应的行tr:nth-child(2n+1)：匹配奇数

45、行的：匹配奇数行的tr。tr:nth-child(2n)：匹配偶数行的：匹配偶数行的tr。tr:nth-child(odd)：匹配奇数行的：匹配奇数行的tr。tr:nth-child(even)：匹配偶数行的：匹配偶数行的tr。tr:nth-child(4)：匹配第四行的：匹配第四行的tr。l:nth-last-child(n)选择器用于选择父元素中倒数第选择器用于选择父元素中倒数第n个位置的元素或特个位置的元素或特定元素，与定元素，与:nth-child(n)的区别在于的区别在于:nth-child(n)选择元素时为正着数选择元素时为正着数的的(从上往下数从上往下数)，而，而:nth-las

46、t-child(n)是从后往前数。是从后往前数。第44页HTML+CSS+JavaScript网页设计第7章CSS选择器:first-of-type和和:last-of-typel:first-of-type选择器类似于选择器类似于:first-child选择选择器，不同之处在于指定元素的类型，主要用器，不同之处在于指定元素的类型，主要用来定位父元素下的某个类型的第一个子元素来定位父元素下的某个类型的第一个子元素。:last-of-type选择器和选择器和:first-of-type选择选择器的功能是一样的，不同之处在于选择的是器的功能是一样的，不同之处在于选择的是父元素下某个类型的最后一个子

47、元素。父元素下某个类型的最后一个子元素。第45页HTML+CSS+JavaScript网页设计第7章CSS选择器:nth-of-type(n)和和:nth-last-of-type(n)l:nth-of-type(n)选择器和选择器和:nth-child(n)选择器非常类似，选择器非常类似，不同之处在于只计算父元素中指定的某种类型的子元素。不同之处在于只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不是同一种类型的子元素时，使用当某个元素中的子元素不是同一种类型的子元素时，使用:nth-of-type(n)选择器来定位父元素中某种类型的子元素选择器来定位父元素中某种类型的子元素是非常

48、方便和有用的。是非常方便和有用的。:nth-of-type(n)选择器中的选择器中的“n”和和:nth-child(n)选择器中的选择器中的n一样，可以是具体的整数，也可一样，可以是具体的整数，也可以是表达式，还可以是关键词。以是表达式，还可以是关键词。l:nth-last-of-type(n)选择器和选择器和:nth-of-type(n)选择器一样选择器一样，选择父元素中指定的某种子元素类型，但起始方向是从，选择父元素中指定的某种子元素类型，但起始方向是从最后一个子元素开始，而且使用方法与最后一个子元素开始，而且使用方法与:nth-last-child(n)选择器一样。选择器一样。第46页H

49、TML+CSS+JavaScript网页设计第7章CSS选择器:only-child和和:only-of-typel:only-child选择器匹配属于其父元素的唯一选择器匹配属于其父元素的唯一子元素的每个元素。例如，子元素的每个元素。例如，E:only-child选选择的是这个择的是这个E元素，也就是子元素。元素，也就是子元素。l:only-of-type是表示一个元素他有很多个子是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一元素，而其中只有一种类型的子元素是唯一的，使用的，使用:only-of-type选择器就可以选中这选择器就可以选中这个元素中的唯一一个类型子元素。个元

50、素中的唯一一个类型子元素。第47页HTML+CSS+JavaScript网页设计第7章CSS选择器语言伪类语言伪类l:lang选择器用于向带有指定选择器用于向带有指定lang属性开始的元素属性开始的元素添加样式，当然也可以使用前面学习的属性选择添加样式，当然也可以使用前面学习的属性选择器来实现相同的功能，例如，下面两个规则的应器来实现相同的功能，例如，下面两个规则的应用效果完全相同：用效果完全相同：plang|=en color:red;p:lang(en)color:red;l上面这个规则会选择上面这个规则会选择lang属性等于属性等于en或以或以en-开头开头的所有段落，但是不对没有指定的