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-classescss2.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 letterh2: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 linep:first-line {color: purple;} 所謂first-line是以顯示時一行所顯示的內容為準，即對一樣的文本（假設50個），如果正常情況下能一行顯示完，那麼調整了瀏覽器寬度後，一行就不能顯示完（第一行只有10個）。那麼first-line所定義的style只對第一行10個有效。 2．6．2．3 restrictions on:first-letter and :first-linecss2中上面兩個虛擬元素之只能用在block元素上。Css2.1中:first-letter可以用在所有元素上。另外的一些限制：
| Table 2-3. Properties permitted on pseudo-elements |
| :first-letter |
:first-line |
| All font properties |
All font properties |
| All color properties |
All color properties |
| All background properties |
All background properties |
| All margin properties |
word-spacing |
| All padding properties |
letter-spacing |
| All border properties |
text-decoration |
| text-decoration |
vertical-align |
| vertical-align (if float is set to none) |
text-transform |
| text-transform |
line-height |
| line-height |
clear (CSS2 only; removed in CSS2.1) |
| float |
text-shadow (CSS2 only) |
| letter-spacing (added in CSS2.1) |
|
| word-spacing (added in CSS2.1 |
|
| clear (CSS2 only; removed in CSS2.1) |
|
| text-shadow (CSS2 only) |
|
2．6．2．4 style before and after elements如果要在每個h2的前面加兩個]符號，且設其顏色為silver，如下：h2:before {content: "]]"; color: silver;}效果：類似的，要在某個元素的後面加入東西，如下：body:after {content: " The End.";}
