学习css 五

2．6 pseudo-classes and pseudo-elements伪类和伪元素

pseudo-class和pseudo-element selector可以将sytle应用到文档中不存在的结构上。也可以应用到phantom classes上，而phantom classes由某些元素的状态或文档的状态inferred。也就是说，style被应用到文档中可以不仅仅基于文档的结构，也可以以一种不能通过简单分析文档组成而做出精确推断的方式。

举例来说，在一场体育比赛中，无论主队何时得分，观众都会欢呼。但是主队将在何时得分是无法知道的，但是只要得分就会有欢呼。虽然不能预测欢呼的时刻，但是欢呼的效果是可以想象得到的。

http://hi.baidu.com/song70/blog/item/d46bfb334d416643ac4b5fc5.html

伪类和伪元素是特殊的类和元素。伪类区别开不同种类的元素（例如，已访问的链接，未访问的链接描述了两个定位锚anchors的类型）。伪元素指元素的一部分（例如段落的第一个字母）。

2．6．1 pseudo-class selectors

元素a表示的是一个链接。链接有两种，访问过的和没有访问过的，但是从html语法无法区分这两者，只能通过比较文档中的链接和浏览器中的历史来判断。类似访问过的和没有访问过的两种链接的形式就是一种pseudo-classes，而使用它们的selector被称为pseudo-class selector。

通常浏览器将没有访问过的链接设为蓝色，访问过的设为红色。如果将classes插入到链接中，自定义访问过的链接的颜色，如

a.visited {color: red;} 

html部分：

<a href="http://www.w3.org/" class="visited">W3C Web site</a>

但是上面的写法有个问题，当 http://www.w3.org/没有被访问过之前，class的取值就应该是unvisited，访问之后是visited。就是说要根据有没有被访问修改class的值，这种做法显然是有问题的。

所以，有另一种方式：

a:visited {color: red;}

这样任何指向访问过的页面的链接都会变成红色，但是并不需要将class属性加入元素a。

2．6．1．1 link pseudo-classes

css2.1定义了两种pseudo-classes，这两种psedudo-classes只能用在超链接上。Html和xhtml1.0和1.1种的任何元素都有href属性。Xml任何元素都做为其他资源的链接。下面是这两个伪类：

第一个伪类似乎多余了，似乎可以不使用第一个伪类而用下面的形式就可以同时定义访问过与没有访问过的：

a {color: blue;}

a:visited {color: red;}

    但是在一种情况下，这样写有问题，如

<a name="section4">4. The Lives of Meerkats</a>

    a虽然没有href属性但是因为a{color:blue}，所以文本4. The Lives of

Meerkats会是蓝色，然而现在a是没有链接的，不需要显示为蓝色。

    所以，还是应该用

a:link {color: purple;}

a:visited {color: silver;}

这种形式，无论a有没有href属性都可以正常显示。

伪类与class selector的组合使用：

<a href="http://www.mysite.net/">My home page</a> 

 

    

 

  <a href="http://www.site.net/" class="external">Another home page</a> 

 

  css: 

 

  a.external:link, a.external:visited {color: maroon;}

设置具有属性class，且其值为external的元素a的访问和未访问的颜色显示。

伪类与id selector的组合使用：

类似上面，

a#footer-copyright:link{font-weight: bold;} 

 

    

 

  a#footer-copyright:visited {font-weight: normal;}

html:

<a href="http://www.mysite.net/">My home page</a> 

 

    

 

  <a href="http://www.site.net/" id="external">Another home page</a>

2．6．1．2 Dynamic pseudo-classes动态的伪类

:link和:visited这两个伪类是静态的，不能在文档的初始化显示之后，做出动态的改变。下面是几个动态的伪类：

例子：

a:link {color: navy;} 

 

    

 

  a:visited {color: gray;} 

 

    

 

  a:hover {color: red;} 

 

    

 

  a:active {color: yellow;}

上面四个定义了a的链接在未访问，已访问，鼠标在其上时，点击时四种状态下的颜色。

另外，这里还有个顺序：

link-vistied-focus-hover-active，

至于顺序的重要性和原因见后。

    上面的三个动态伪类可以用到所有元素。

2．6．1．3 real-world issues with dynamic styling

动态的伪类带来一些有趣的问题和特性。

比如，定义链接的link和vistied都是13px字体，而hover式20px字体，如下：

当鼠标在simon.incutio.com上时，其字体变大，因此该行以及下面各行会重画。

However, the CSS specifications state that user agents are not required to redraw a document once it's been rendered for initial display, so you can't absolutely rely on your intended effect actually happening. I strongly recommend that you avoid designs that depend on such behavior.

2．6．1．4 选择第一个子元素

first-child用来选择一个元素第一个子元素。这个伪类常被误用。

<div> 

 

    

 

  <p>These are the necessary steps:</p> 

 

    

 

  <ul> 

 

    

 

  <li>Insert key</li> 

 

    

 

  <li>Turn key <strong>clockwise</strong></li> 

 

    

 

  <li>Push accelerator</li> 

 

    

 

  </ul> 

 

    

 

  <p> 

 

    

 

  Do <em>not</em> push the brake at the same time as the accelerator. 

 

    

 

  </p> 

 

    

 

  </div> 

 

  css： 

 

  p:first-child {font-weight: bold;} 

 

    

 

  li:first-child {text-transform: uppercase;}

意为：任何元素的第一个p元素，任何元素的第一个li元素。

效果：

注意：ie6不支持。但是有方法让ie6支持。

2．6．1．5 基于语言的选择

:lang()，其功能基本等于attribute selector |=。

例如，

*:lang(fr){font-style:italic;}

等于

*[lang|="fr"]{font-style:italic;}

区别是，html文档种可以有很多种方式确定文档的语言，lang属性，meta元素，http headers等。所以使用伪类来选择语言更合适。:lang(c)会根据在html标准和RFC1766里定义的语言编码来匹配。

2．6．1．6 混合使用伪类

例如，

a:link:hover:lang(de) {color: gray;}

a:visited:hover:lang(de) {color: silver;}

定义了使用德语的链接在鼠标指向时，访问和未访问的链接的不同颜色。

2．6．2 pseudo-element selectors

伪元素将虚构的元素插入到文档中，以实现某种效果。一共有四种伪元素。另外，伪元素必须在selector的最后。

2．6．2．1 styling the first letter

h2:first-letter {color: red;}

将p（paragraph）元素的文本的第一个字母设为红色。

相当于有下面这样的一段html片断

<h2><h2:first-letter>T</h2:first-letter>his is an h2 element</h2>

<h2:first-letter>元素不出现在源代码中，而是浏览器建立并应用相应的style。也就是说<h2:first-letter>是伪元素，你不要加入<h2:first-letter>，浏览器为你完成。

2．6．2．2 styling the first line

p:first-line {color: purple;}

所谓first-line是以显示时一行所显示的内容为准，即对一样的文本（假设50个），如果正常情况下能一行显示完，那么调整了浏览器宽度后，一行就不能显示完（第一行只有10个）。那么first-line所定义的style只对第一行10个有效。

2．6．2．3 restrictions on:first-letter and :first-line

css2中上面两个伪元素之只能用在block元素上。

Css2.1中:first-letter可以用在所有元素上。

另外的一些限制：

2．6．2．4 style before and after elements

如果要在每个h2的前面加两个]符号，且设其颜色为silver，如下：

h2:before {content: "]]"; color: silver;}

效果：

类似的，要在某个元素的后面加入东西，如下：

body:after {content: " The End.";}