4.4 動態偽類選擇器

偽類選擇器并不是針對真正的元素使用的選擇器，只針對CSS中的偽元素起作用。

4.4.1 內容相關的屬性

內容相關的屬性與CSS其他屬性一樣，同樣需要定義在CSS樣式的大括號內。content屬性是CSS支持的內容相關屬性中最重要的一個，該屬性的值可以是字符串、url、attr、open-quote等格式，該屬性用于向指定元素之前或之后插入指定內容。

【例4-7】（實例文件：ch04\Chap4.7.html）內容相關的屬性。

在上面的代碼中，為每一個li之前添加字符串，并設置了字體顏色為紅色。

相關的代碼實例請參考Chap4.7.html文件，在IE瀏覽器中運行的結果如圖4-10所示。

圖4-10 內容相關的屬性

4.4.2 插入圖像

content屬性值除了可以添加字符串外，還可以添加圖片，代碼如下。

      content: url("src")

src指定圖片的路徑。

【例4-8】（實例文件：ch04\Chap4.8.html）插入圖片。

相關的代碼實例請參考Chap4.8.html文件，在IE瀏覽器中運行的結果如圖4-11所示。

圖4-11 插入圖像

4.4.3 只插入部分元素

有時候只想為一部分元素添加內容，這時需先把要添加內容的元素找到，如只想給前兩個元素添加內容，只需找到前兩個元素的選擇器，再在其后面添加偽類選擇器，這樣就可以設置其內容了。

【例4-9】（實例文件：ch04\Chap4.9.html）只插入部分元素。

相關的代碼實例請參考Chap4.10.html文件，IE瀏覽器中運行的結果如圖4-12所示。

圖4-12 只插入部分元素

4.4.4 配合quotes屬性執行插入

quotes屬性可以定義open-quote和close-quote，然后就可以在content屬性中應用它們了。

【例4-10】（實例文件：ch04\Chap4.10.html）配合quotes屬性執行插入。

相關的代碼實例請參考Chap4.10.html文件，在IE瀏覽器中運行的結果如圖4-13所示。

圖4-13 配合quotes屬性執行插入

4.4.5 配合counter-increment屬性添加編號

counter-increment屬性用于定義計數器，如要給多條內容添加編號，就可以通過該屬性來設置。定義計數器很簡單，只需給需要添加編號的元素定義一個計數器，然后結合content屬性在該元素前面添加這個計數器，就可以實現編號了。

【例4-11】（實例文件：ch04\Chap4.11.html）配合unter-increment屬性添加編號。

相關的代碼實例請參考Chap4.11.html文件，在IE瀏覽器中運行的結果如圖4-14所示。

圖4-14 計數器添加編號效果

4.4.6 使用自定義編號

從上面的案例可以發現，CSS默認的編號樣式是數字，但有時我們還需要使用自定義編號來滿足不同的需要。我們可以通過counter(name,list-style-type)用法來實現使用自定義編號，name是計數器的名字，list-style-type指定自定義編號的樣式，它的一部分取值如表4-1所示。

表4-1 自定義編號部分取值

【例4-12】（實例文件：ch04\Chap4.12.html）使用自定義編號。

相關的代碼實例請參考Chap4.12.html文件，在IE瀏覽器中運行的結果如圖4-15所示。

圖4-15 使用自定義編號

4.4.7 添加多級編號

在上面案例中，只是添加了一級編號，還可以添加多級編號，像書的目錄一樣，可以有多級的編號。下面就使用計數器來實現一個簡單的目錄形式的編號。

【例4-13】（實例文件：ch04\Chap4.13.html）添加多級編號。

相關的代碼實例請參考Chap4.13.html文件，在IE瀏覽器中運行的結果如圖4-16所示。

我們會發現第二級編號是連續的，正常情況下每一章的第一節應該從1開始，上面的效果不是我們想要的，但是我們可以通過counter-reset屬相來改變，該屬性用于重置計數器。我們在h2樣式中添加“counter-reset:order2;”即可，這樣就會重置order2計數器，顯示效果如圖4-17所示。

圖4-16 多級計數器的應用

圖4-17 重置order2計數器后的效果