第9章定义选择器.ppt

1、HTML h1 emcolor:red; em.verycolor: red; div#gaudicolor: red; a:linkcolor: red; anamecolor: red;,选择器可以定义最多5个不同的标准来选择应该进行格式化的元素： 元素的类型或名称 元素所在的上下文 元素的类或id 元素的伪类或伪元素本身 元素是否有某些属性和值 选择器可以使用这5个标准的任意组合,9.1构造选择器,La Casa Mil h2color: red; .verycolor: red; *color:red; h1, p, div border:1px solid black; ,提示： 1

2、.除非指定其他情况，指定类型的所有元素都将被格式化，无论它们出现在文档中的什么地方。 2.并非所有选择器都需要指定元素的名称。 3.通配符*匹配代码中的任何元素。 4.可以为一个选择器选择一组元素，它们之间用逗号分隔。,9.2按照名称选择元素,一、按照id选择要格式化的元素 #gaudi color:red; div#gaudicolor:red; 二、按照类选择要格式化的元素 .works color:green div.workscolor:green,提示： 1.可以单独使用类和id选择器，也可以与其他选择器标准一起使用,9.3按照id或类选择元素,。,影响所有属于works类的元素,只

3、影响属于works 类的div元素, Many tourists Barcelona La Casa Mil Gauds work La Sagrada Famlia,在CSS中，可以根据元素的祖先元素，父元素或同胞元素来定位它们。,9.4按照上下文选择元素 (P141),基于元素的祖先元素的选择器,div#gaudi p color:red,提示： 基于元素的祖先元素的选择器成为后代迭选器。 当前浏览器对后代选择器的支持非常好。,Id是gaudi的div元素的后代的任何p元素，不管是第几代, Many tourists Barcelona La Casa Mil Gauds work La

4、Sagrada Famlia,在CSS中，可以根据元素的祖先元素，父元素或同胞元素来定位它们。,9.4按照上下文选择元素,基于元素的父元素的选择器,div#gaudi p color:red,提示： 基于元素的父元素的选择器称为子元素迭代器 Windows上的IE5.5和IE6不支持子元素迭代器。IE7是支持的。,只选择Id是gaudi的div元素的子元素的那些p元素, Many tourists Barcelona La Casa Mil Gauds work La Sagrada Famlia,在CSS中，可以根据元素的祖先元素，父元素或同胞元素来定位它们。,9.4按照上下文选择元素,选择

5、父元素的第一个子元素来进行格式化,div#gaudi p:first-child color:red,有时候，能够只选择一个元素的第一个子元素是有用的。 选择器的:first-child部分称为伪类。 (演示), Many tourists Barcelona La Casa Mil Gauds work La Sagrada Famlia,在CSS中，可以根据元素的祖先元素，父元素或同胞元素来定位它们。,9.4按照上下文选择元素,按照相邻同胞选择要格式化的元素,div#gaudi p+p color:red,相邻同胞元素就是在同一个父元素中直接出现在所关心元素前面的元素。 (演示) Fire

6、fox、opera和IE7当前支持相邻同胞选择器。, La Casa Mil Gauds work was essentially useful. La Casa Mil is an apartment building and real people live there. ,还可以选择元素的第一个字母或第一行，然后对其进行格式化。,9.5 选择元素的一部分,选择元素的第一行,p:first-line color:red (演示), La Casa Mil Gauds work was essentially useful. La Casa Mil is an apartment build

7、ing and real people live there. ,还可以选择元素的第一个字母或第一行，然后对其进行格式化。,9.5 选择元素的一部分,选择元素的第一个字母,p:first-letter color:red,演示,first-letter和first-line选择器称为伪元素，因为它们引用手工地标为独立元素的实际内容。当然可以使用特殊的span标记标出每个段落的第一个字母（尽管这有点儿麻烦）；但是第一行的内容取决于许多因素，包括访问者的窗口大小和访问者的显示器分辨率等不可控制的因素。 2. 当前所有主流浏览器（包括IE6及更高版本）都支持first-letter和first-li

8、ne伪元素。 3. CSS规范指出，选择器应该包含第一个字母前面的标点符号。Firefox和Opera是这么做的，IE（从IE7开始）却不符合规范。而是将标点符号本身当作第一个字母。,还可以选择元素的第一个字母或第一行，然后对其进行格式化。,9.5 选择元素的一部分,提示：,4. 只有某些css属性可以应用于first-letter伪元素：font、color、background、text-decoration、vertical-align（只要first-letter不是浮动的）、text-rransform、line-height、margin、padding、border、folat和

9、clear。 5. 可以将first-letter和first-line伪元素与更复杂的选择器使用。,还可以选择元素的第一个字母或第一行，然后对其进行格式化。,9.5 选择元素的一部分,提示：,Barcelona celebrated the 150th anniversary of Gauds birth in 2002.,9.6 按照状态选择链接元素（P146）,a:link color:red a:visited color:orange a:focus color:purple/*紫色*/ a:hover color:green a:active color:blue （演示）,css

10、允许按照链接的当前状态对它们进行格式化，链接的状态包括它们是否已经被访问过、访问者是否将鼠标光标停留在它们上面，等等。,在大多数浏览器中，这些伪类（其中难以度量的特征是无法手工进行标识的）对于所有类型的元素都是有效的。但是，IE7及其以下版本只对a标记支持这些伪类。 因为链接可能同时处于多个状态（比如同时处于激活和鼠标停留状态），而且晚出现的规则覆盖前面出现的规则，所以按照以下次序定义规则是很重要的：链接(link)、以访问(vistied)、焦点(focus)、鼠标停留(hover)、激活(active)。,9.6 按照状态选择链接元素,提示：, La Casa Mil Gauds work

11、 was essentially useful. La Casa Mil is an apartment building and real people live there. ,9.7按照属性选择元素,divclass color:red divclass=workscolor:red; divclass=workscolor:red;,当前的所有主流浏览器（包括IE7以及更高版本）都支持按照元素包含的属性（和值）来选择元素。 （演示）,Antoni Gaud La Casa Mil Gauds work was essentially useful. ,9.8指定元素组,h1, h2 color:red,有时候需要创建一个样式规则以对几