CSS选择器-.pdf

《CSS选择器-.pdf》由会员分享，可在线阅读，更多相关《CSS选择器-.pdf（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSS 基础教程（选择器）Source FromW3SchoolEdited by Chandler SuAIEN Institute SHOU 2011 CSS 元素选择器CSS 元素选择器最常见的CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置HTML 的样式，选择器通常将是某个HTML 元素，比如 p、h1、em、a，甚至可以是html 本身：html color:black;h1 color:blue;h2 color:silver;亲自试一试可以将某个样式从一个元素切换到另一个元素。假设您决定将上面的段落文本（而不是h1 元素）设置为灰色。只需要把h1 选

2、择器该为p：html color:black;p color:gray;h2 color:silver;亲自试一试类型选择器在 W3C 标准中，元素选择器又称为类型选择器（type selector）。“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”下面的规则匹配文档树中所有h1 元素：h1 font-family:sans-serif;因此，我们也可以为XML 文档中的元素设置样式：XML 文档：George John Reminder Dont forget the meeting!CSS 文档：note font-family:Verdana,Ar

3、ial;margin-left:30px;to font-size:28px;display:block;from font-size:28px;display:block;heading color:red;font-size:60px;display:block;body color:blue;font-size:35px;display:block;查看效果通过上面的例子，您可以看到，CSS 元素选择器（类型选择器）可以设置XML 文档中元素的样式。如果您需要更多关于为XML 文档添加样式的知识，请访问w3school 的 XML 教程。CSS 分组选择器分组假设希望h2 元素和段落都有

4、灰色。为达到这个目的，最容易的做法是使用以下声明：h2,p color:gray;将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。可以将任意多个选择器分组在一起，对此没有任何限制。例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：body,h2,p,table,th,td,pre,strong,em color:gray;提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可

5、以得到更简洁的样式表。以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：/*no grouping*/h1 color:blue;h2 color:blue;h3 color:blue;h4 color:blue;h5 color:blue;h6 color:blue;/*grouping*/h1,h2,h3,h4,h5,h6 color:blue;亲自试一试分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：/*group 1*/h1 color:silver;background:white;h2 color

6、:silver;background:gray;h3 color:white;background:gray;h4 color:silver;background:white;b color:gray;background:white;/*group 2*/h1,h2,h4 color:silver;h2,h3 background:gray;h1,h4,b background:white;h3 color:white;b color:gray;/*group 3*/h1,h4 color:silver;background:white;h2 color:silver;h3 color:wh

7、ite;h2,h3 background:gray;b color:gray;background:white;亲自试一试：group 1group 2group 3请注意，group 3 中使用了“声明分组”。稍后我们会为您介绍“声明分组”。通配符选择器CSS2 引入了一种新的简单选择器-通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如，下面的规则可以使文档中的每个元素都为红色：*color:red;亲自试一试这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所

8、有元素的color 属性值指定为red。声明分组我们既可以对选择器进行分组，也可以对声明分组。假设您希望所有h1 元素都有红色背景，并使用28 像素高的Verdana 字体显示为蓝色文本，可以写以下样式：h1 font:28px Verdana;h1 color:blue;h1 background:red;但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：h1 font:28px Verdana;color:white;background:black;这与前面的3 行样式表的效果完全相同。注意，对声明分组，一定要在各

9、个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：h1 font:28px Verdana;color:blue;background:red;亲自试一试怎么样，上面这种写法的可读性是不是更强。不过，如果忽略了第二个分号，用户代理就会把这个样式表解释如下：h1 font:28px Verdana;color:blue background:red;亲自试一试因为 background 对 color 来说不是一个合法值，而且由于只能为color 指定一个关键字，所以用户代理会完全忽略这个color 声明（包括background:

10、black 部分）。这样h1 标题只会显示为蓝色，而没有红色背景，不过更有可能根本得不到蓝色的h1。相反，这些标题只会显示为默认颜色（通常是黑色），而且根本没有背景色。font:28px Verdana 声明仍能正常发挥作用，因为它确实正确地以一个分号结尾。与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，也更易维护。提示：在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。结合选择器和声明的分组我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。下面的规则为所有标题指定了一种复杂的样式

11、：h1,h2,h3,h4,h5,h6 color:gray;background:white;padding:10px;border:1px solid black;font-family:Verdana;亲自试一试上面这条规则将所有标题的样式定义为带有白色背景的灰色文本，其内边距是10 像素，并带有1 像素的实心边框，文本字体是Verdana。CSS 类选择器详解类选择器允许以一种独立于文档元素的方式来指定样式。CSS 类选择器类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器

12、通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。修改HTML 代码在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将class 指定为一个适当的值。请看下面的HTML 代码：This heading is very important.This paragraph is very important.在上面的代码中，两个元素的class 都指定为important：第一个标题（h1 元素），第二个段落（p 元素）。语法然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合

13、通配选择器：*.important color:red;如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：.important color:red;亲自试一试结合元素选择器类选择器可以结合元素选择器来使用。例如，您可能希望只有段落显示为红色文本：p.important color:red;选择器现在会匹配class 属性包含important 的所有p 元素，但是其他任何类型的元素都不匹配，不论是否有此class 属性。选择器p.important 解释为：“其 class 属性值为important 的所有段落”。因为 h1 元素不是段落，这个规则的选择

14、器与之不匹配，因此h1 元素不会变成红色文本。如果你确实希望为h1 元素指定不同的样式，可以使用选择器h1.important：p.important color:red;h1.important color:blue;亲自试一试CSS 多类选择器在上一节中，我们处理了class 值中包含一个词的情况。在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：This paragraph is a very important warning.这两个词的顺序无关紧要，

15、写成warning important 也可以。我们假设class 为 important 的所有元素都是粗体，而class 为 warning 的所有元素为斜体，class 中同时包含important 和 warning 的所有元素还有一个银色的背景。就可以写作：.important font-weight:bold;.warning font-weight:italic;.important.warning background:silver;亲自试一试通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就

16、会失败。请看下面的规则：.important.urgent background:silver;不出所料，这个选择器将只匹配class 属性中包含词important 和 urgent 的 p 元素。因此，如果一个 p 元素的class 属性中只有词important 和 warning，将不能匹配。不过，它能匹配以下元素：This paragraph is a very important and urgent warning.亲自试一试重要事项：在 IE7 之前的版本中，不同平台的Internet Explorer 都不能正确地处理多类选择器。CSS ID 选择器详解ID 选择器允许以一种

17、独立于文档元素的方式来指定样式。CSS ID 选择器在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。语法首先，ID 选择器前面有一个#号-也称为棋盘号或井号。请看下面的规则：*#intro font-weight:bold;与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：#intro font-weight:bold;这个选择器的效果将是一样的。第二个区别是ID 选择器不引用class 属性的值，毫无疑问，它要引用id 属性中的值。以下是一个实际ID 选择器的例子：This is a paragraph of introduction.亲自试一试类选择器还

18、是ID 选择器？在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。前一章中类名important 被应用到p 和 h1 元素，而且它还可以应用到更多元素。区别1：只能在文档中使用一次与类不同，在一个HTML 文档中，ID 选择器会使用一次，而且仅一次。区别2：不能使用ID 词列表不同于类选择器，ID 选择器不能结合使用，因为ID 属性不允许有以空格分隔的词列表。区别3：ID 能包含更多含义类似于类，可以独立于元素来选择ID。有些情况下，您知道文档中会出现某个特定ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的ID 选择器。例如，您可能知道在一个给定的文档中会有一个 ID

19、值为mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：#mostImportant color:red;background:yellow;这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的ID 值）：This is important!This is important!This is important!亲自试一试：为 id 为 mostImportant 的 h1 元素设定样式为 i

20、d 为 mostImportant 的 em 元素设定样式为 id 为 mostImportant 的 ul 元素设定样式区分大小写请注意，类选择器和ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和ID 值定义为区分大小写，所以类和ID 值的大小写必须与文档中的相应值匹配。因此，对于以下的CSS 和 HTML，元素不会变成粗体：#intro font-weight:bold;This is a paragraph of introduction.由于字母i 的大小写不同，所以选择器不会匹配上面的元素。CSS 属性选择器详解CSS 2 引入了属性选择器。属性选

21、择器可以根据元素的属性及属性值来选择元素。简单属性选择如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。例子1 如果您希望把包含标题（title）的所有元素变为红色，可以写作：*title color:red;亲自试一试例子2 与上面类似，可以只对有href 属性的锚（a 元素）应用样式：ahref color:red;亲自试一试例子3 还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有href 和 title 属性的HTML 超链接的文本设置为红色，可以这样写：ahreftitle color:red;亲自试一试例子4 可以采用一些创造性的

22、方法使用这个特性。例如，可以对所有带有alt 属性的图像应用样式，从而突出显示这些有效的图像：imgalt border:5px solid red;亲自试一试提示：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。例子5：为XML 文档使用属性选择器属性选择器在XML 文档中相当有用，因为XML 语言主张要针对元素和属性的用途指定元素名和属性名。假设我们为描述太阳系行星设计了一个XML 文档。如果我们想选择有moons 属性的所有planet 元素，使之显示为红色，以便能更关注有moons 的行星，就可以这样写：planetmoons color:red;这会让以下标记片段中

23、的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：Venus Earth Mars 查看效果根据具体属性值选择除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。例子1 例如，假设希望将指向Web 服务器上某个指定文档的超链接变成红色，可以这样写：ahref=http:/ color:red;亲自试一试例子2 与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。ahref=http:/ color:red;这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：W3School CSS HTML 亲自试一试例

24、子3 同样地，XML 语言也可以利用这种方法来设置样式。下面我们再回到行星那个例子中。假设只希望选择moons 属性值为1 的那些planet 元素：planetmoons=1 color:red;上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：Venus Earth Mars 查看效果属性与属性值必须完全匹配请注意，这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。请考虑一下的标记片段：This paragraph is a very important warning.如果写成pclass=important，那么这个规则不能

25、匹配示例标记。要根据具体属性值来选择该元素，必须这样写：pclass=important warning color:red;亲自试一试根据部分属性值选择如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（）。假设您想选择class 属性中包含important 的元素，可以用下面这个选择器做到这一点：pclass=important color:red;亲自试一试如果忽略了波浪号，则说明需要完成完全值匹配。部分值属性选择器与点号类名记法的区别该选择器等价于我们在类选择器中讨论过的点号类名记法。也就是说，p.important 和 pimportant 应用到HTML 文档时是等价

26、的。那么，为什么还要有=属性选择器呢？因为它能用于任何属性，而不只是class。例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于title 文档的部分属性选择器，只选择这些图片：imgtitle=Figure border:1px solid gray;这个规则会选择title 文本包含Figure 的所有图像。没有title 属性或者title 属性中不包含Figure 的图像都不会匹配。亲自试一试子串匹配属性选择器下面为您介绍一个更高级的选择器模块，它是CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器

27、”。很多现代浏览器都支持这些选择器，包括IE7。下表是对这些选择器的简单总结：类型描述abc=def 选择 abc 属性值以def 开头的所有元素abc$=def 选择 abc 属性值以def 结尾的所有元素abc*=def 选择 abc 属性值中包含子串def 的所有元素可以想到，这些选择有很多用途。举例来说，如果希望对指向W3School 的所有链接应用样式，不必为所有这些链接指定class，再根据这个类编写样式，而只需编写以下规则：ahref*= color:red;亲自试一试提示：任何属性都可以使用这些选择器。特定属性选择类型最后为您介绍特定属性选择器。请看下面的例子：*lang|=e

28、n color:red;上面这个规则会选择lang 属性等于en 或以en-开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：Hello!Greetings!Gday!Bonjour!Jrooana!亲自试一试一般来说，att|=val 可以用于任何属性及其值。假设一个HTML 文档中有一系列图片，其中每个图片的文件名都形如figure-1.jpg和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：imgsrc|=figure border:1px solid gray;亲自试一试当然，这种属性选择器最常见的用途还是匹配语言值。CSS 后代选择器后

29、代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对h1 元素中的em 元素应用样式，可以这样写：h1 em color:red;上面这个规则会把作为h1 元素后代的em 元素的文本变为红色。其他em 文本（如段落或块引用中的 em）则不会被这个规则选中：This is a important heading This is a important paragraph.亲自试一试当然，您也可以在h1

30、 中找到的每个em 元素上放一个class 属性，但是显然，后代选择器的效率更高。语法解释在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“.在.找到”、“.作为 .的一部分”、“.作为.的后代”，但是要求必须从右向左读选择器。因此，h1 em 选择器可以解释为“作为 h1 元素后代的任何em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有h1 会把以下样式应用到该em”。具体应用后代选择器的功能极其强大。有了它，可以使HTML 中不可能实现的任务成为可能。假设有一个文档

31、，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。解决方法是使用后代选择器。在这种情况下，可以为包含边栏的div 指定值为sidebar 的 class 属性，并把主区的class 属性值设置为maincontent。然后编写以下样式：div.sidebar background:blue;div.maincontent background:white;div.sidebar a:link color:white;div.maincontent a:link color:blue;有

32、关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。例如，如果写作ul em，这个语法就会选择从ul 元素继承的所有em 元素，而不论em 的嵌套层次多深。因此，ul em 将会选择以下标记中的所有em 元素：List item 1 List item 1-1 List item 1-2 List item 1-3 List item 1-3-1 List item 1-3-2 List item 1-3-3 List item 1-4 List item 2 List item 3 亲自试一试CSS 子元素选择器与后代选择器相比，子元素选择器（Child selector

33、s）只能选择作为某元素子元素的元素。选择子元素如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。例如，如果您希望选择只作为h1 元素子元素的strong 元素，可以这样写：h1 strong color:red;这个规则会把第一个h1 下面的strong 元素变为红色，但是第二个strong 不受影响：This is very important.This is really very important.亲自试一试语法解释您应该已经注意到了，子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。因此

34、，以下写法都没有问题：h1 strong h1 strong h1 strong h1strong 如果从右向左读，选择器h1 strong 可以解释为“选择作为h1 元素子元素的所有strong 元素”。结合后代选择器和子选择器请看下面这个选择器：pany td p 下面的选择器会选择作为td 元素子元素的所有p 元素，这个 td 元素本身从table 元素继承，该 table 元素有一个包含company 的 class 属性。CSS 相邻兄弟选择器相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。选择相邻兄弟如果需要选择

35、紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。例如，如果要增加紧接在h1 元素后出现的段落的上边距，可以这样写：h1+p margin-top:50px;这个选择器读作：“选择紧接在h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。亲自试一试语法解释相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。请看下面这个文档树片段：List item 1 List item 2 List item 3

36、 List item 1 List item 2 List item 3 在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：li+li font-weight:bold;上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。亲自试一试结合其他选择器相邻兄弟结合符还可以结合其他结合符：htm

37、l body table+ul margin-top:20px;这个选择器解释为：选择紧接在table 元素后出现的所有兄弟ul 元素，该 table 元素包含在一个body 元素中，body 元素本身是html 元素的子元素。CSS 伪类(Pseudo-classes)CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪类(Pseudo-classes)实例：超链接本例演示如何向文档中的超链接添加不同的颜色。超链接2本例演示如何向超链接添加其他样式。超链接-:focus 的使用本例演示如何对超链接应用:focus 伪类（无法在IE 中工作）。:first-child（首个子对象）本例演示:

38、first-child 伪类的用法。:lang（语言）本例演示:lang 伪类的用法。语法伪类的语法：selector:pseudo-class property:value CSS 类也可与伪类搭配使用。selector.class:pseudo-class property:value 锚伪类在支持CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。a:link color:#FF0000/*未访问的链接 */a:visited color:#00FF00/*已访问的链接 */a:hover color:#FF00FF

39、/*鼠标移动到链接上*/a:active color:#0000FF/*选定的链接 */亲自试一试提示：在 CSS 定义中，a:hover 必须被置于a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于a:hover 之后，才是有效的。提示：伪类名称对大小写不敏感。伪类与CSS 类伪类可以与CSS 类配合使用：a.red:visited color:#FF0000 CSS Syntax 假如上面的例子中的链接被访问过，那么它将显示为红色。CSS2-:first-child 伪类您可以使用:first-child 伪类来选择元素的第一个子

40、元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：These are the necessary steps:Intert KeyTurn key clockwise Push accelerator Do not push the brake at the same time as the accelerator.在上面的例子中，作为第一个元素的元素包括第一个p、第一个li 和 strong 和 em 元素。给定以下规则：p:first-child font-weight:bold;li:first-child text-transform:uppercase;第一个规则

41、将作为某元素第一个子元素的所有p 元素设置为粗体。第二个规则将作为某个元素（在HTML 中，这肯定是ol 或 ul 元素）第一个子元素的所有li 元素变成大写。请访问该链接，来查看这个:first-child 实例 的效果。提示：最常见的错误是认为p:first-child 之类的选择器会选择p 元素的第一个子元素。注释：必须声明，这样:first-child 才能在IE 中生效。为了使您更透彻地理解:first-child 伪类，我们另外提供了3 个例子：例子1-匹配第一个 元素在下面的例子中，选择器匹配作为任何元素的第一个子元素的p 元素：p:first-child color:red;s

42、ome textsome text TIY例子2-匹配所有 元素中的第一个 元素在下面的例子中，选择器匹配所有 元素中的第一个 元素：p i:first-child font-weight:bold;some text.some text.some text.some text.TIY例子3-匹配所有作为第一个子元素的 元素中的所有 元素在下面的例子中，选择器匹配所有作为元素的第一个子元素的 元素中的所有 元素：p:first-child i color:blue;some text.some text.some text.some text.TIYCSS2-:lang 伪类:lang 伪类使

43、你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为no 的 q 元素定义引号的类型：q:lang(no)quotes:文字 段落中的引用的文字 文字 伪类W3C：W3C 列指示出该属性在哪个CSS 版本中定义（CSS1 还是CSS2）。属性描述CSS:active向被激活的元素添加样式。1:focus向拥有键盘输入焦点的元素添加样式。2:hover当鼠标悬浮在元素上方时，向元素添加样式。1:link向未被访问的链接添加样式。1:visited向已被访问的链接添加样式。1:first-child向元素的第一个子元素添加样式。2:lang向带有指定lang 属性的元素添加

44、样式。2 CSS 伪元素(Pseudo-elements)CSS 伪元素用于向某些选择器设置特殊效果。语法伪元素的语法：selector:pseudo-element property:value;CSS 类也可以与伪元素配合使用：selector.class:pseudo-element property:value;:first-line 伪元素first-line 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据first-line 伪元素中的样式对p 元素的第一行文本进行格式化：实例p:first-line color:#ff0000;font-variant:smal

45、l-caps;亲自试一试注释：first-line 伪元素只能用于块级元素。注释：下面的属性可应用于first-line 伪元素：font color background word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear:first-letter 伪元素first-letter 伪元素用于向文本的首字母设置特殊样式：p:first-letter color:#ff0000;font-size:xx-large;亲自试一试注释：first-letter 伪元素只

46、能用于块级元素。注释：下面的属性可应用于first-letter 伪元素：font color background margin padding border text-decoration vertical-align(仅当 float 为 none 时)text-transform line-height float clear 伪元素和CSS 类伪元素可以与CSS 类配合使用：p.article:first-letter color:#FF0000;This is a paragraph in an article。上面的例子会使所有class 为 article 的段落的首字母变为红

47、色。多重伪元素可以结合多个伪元素来使用。在下面的例子中，段落的第一个字母将显示为红色，其字体大小为xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：p:first-letter color:#ff0000;font-size:xx-large;p:first-line color:#0000ff;font-variant:small-caps;亲自试一试CSS2-:before 伪元素:before 伪元素可以在元素的内容前面插入新内容。下面的例子在每个 元素前面插入一幅图片：h1:before content:url(logo.gif);亲自试一试CSS2-:after 伪元素:after 伪元素可以在元素的内容之后插入新内容。下面的例子在每个 元素后面插入一幅图片：h1:after content:url(logo.gif);亲自试一试伪元素W3C：W3C 列指示出该属性在哪个CSS 版本中定义（CSS1 还是CSS2）。属性描述CSS:first-letter向文本的第一个字母添加特殊样式。1:first-line向文本的首行添加特殊样式。1:before在元素之前添加内容。2:after在元素之后添加内容。2