二.CSS的僞類

CSS的僞類（Pseudo-classes）分爲兩種：UI僞類和結構化僞類，僞類通常用於向某些選擇器添加特殊的效果，僞類選擇符用"  : "進行標示，若是是「 ::  」 表示CSS3新增僞類

UI僞類

UI僞類會在HTML標籤處於某種狀態時，應用CSS樣式，最常使用UI僞類的標籤是a，利用連接僞類，用戶能夠在鼠標懸停是改變的顏色，去掉文本的下劃線或提示信息面板等

咱們先來討論下連接僞類。連接僞類總共有四個，由於連接始終是如下四種狀態之一

• link  等待用戶點擊
• visited 用戶此前點擊過
• hover 鼠標懸停狀態
• active 連接正在被點擊

下面是使用四個僞類選擇符的連接a標籤

a:link{color:black;}
a:visited{color:green;}
a:hover{text-decoration: none;}
a:active{color: red;}

因爲四種狀態的特指度相同，上面連接在初始狀態時是黑色，點擊以後是綠色，懸停時下劃線消失，正在點擊時顯示爲紅色

須要說明的時候，僞類能夠應用任何元素，而不單單是a元素

p:hover{background-color: blue;}

上面代碼，可讓段落，在懸停時改變背景色爲藍色

 結構化僞類

結構化僞類能夠根據標籤的結構關係應該樣式

e:first-child  表明一組同胞元素中的第一個元素

e:last-child  表明一組同胞元素中的最後一個元素

下面的CSS標記，會將列表的第一行文本設置爲紅色

ol.results li:first-child{color:red;}

<ol class="results">
    <li>My Fast Pony</li>
    <li>Steady Trotter</li>
    <li>Slow Ol' Nag</li>
    <li>My Fast Pony</li>
    <li>Steady Trotter</li>
    <li>Slow Ol' Nag</li>
</ol>

同理

ol.results li:last-child{color:green;}

將該列表最後一行文本設置爲綠色

e:nth-child(n)

這個僞類更加靈活，而不像e:first-child或e:last-child只是用於設置第一個和最後一個元素那麼簡單，e:nth-child(n)它能夠指定同一組中的任何一個元素

像上面那樣的樣式，咱們可使用e:nth-child(n)完成一樣的效果

 ol.results li:nth-child(1){color:red;}

 ol.results li:nth-child(6){color:green;}

數字一、6 表明第一個元素和最後一個元素

ol.results li:nth-child(4){color:yellow;}

上面的CSS將列表的第四項設置爲黃色

然而e:nth-child()真正強大之處在於，它能夠實現奇偶選擇

 ol.results li:nth-child(odd){color:red;}
 ol.results li:nth-child(even){color:green}

這樣整個列表的一、三、5項文本被設置爲紅色，而二、四、6項被設置爲綠色

 僞元素

e::first-letter

選擇首字母

可使用e::first-letter將段落的首字母字體變大

p::first-letter{font-size: 300%;}

僞元素其實是替咱們添加了無形的標籤

e::first-line

選擇元素的第一行

例如，使用e::first-line將段落的第一行字體放大

p::first-line{font-size: 300%;}

 e::before和e::after

分別用於在特別元素的前面或後面添加特定內容

下面有一個段落

<p class="demo">This is a demo</p>

CSS樣式

 p.demo::before{content: "CSS-Study:"}

效果以下：

上面的全部，須要注意的是搜索引擎，不會取得僞元素的信息，由於它自己就不存在

 下面是僞類總結結構圖