css虛擬元素

 

偽類

 :first-child 偽類。偽類向元素的第一個子項目添加樣式。

例如我們想列表中的第一個元素做點特別的定義

li:first-child{color:red}

<ul>

<li>這是ul裡的一個li</li>

<li>這是ul裡的二個li</li>

<li>這是ul裡的三個li</li>

</ul>

連結偽類：

:link 和:visited

例如:

a:link{color:#33FF00;}

a:visited {color:#FF0000;}

<a href="http://www.baidu.com">百度</a>

動態偽類：

:hover，:active，:focus.

:hover 表示滑鼠移上去的狀態。

:active，滑鼠點擊按下的狀態。

:focus，表示得到焦點的狀態。

:active和:focus的區別。

例如:

<label for="username">使用者名稱:</label><input type="text" id="username" />

<label for="password">密碼:</label><input type="password" id="password" />

Css:

input#username:active{background:#000099}

input#password:focus{background:#00FF00}

不難發現：點擊第一個文字框，點了文字框的背景色在鬆開滑鼠時就沒了。

而點擊第二個文字框。除非我們點擊網頁其他地方，不然它還是會一直給css定義到

偽對象

:first-letter

用於設定對象內的第一個字元的樣式表屬性，最常見的應用就是配合float做首字母下沉的效果。

P:first-letter{float:left;font-size:2.5em;color:red}

注:first-letter偽對象僅作用於塊元素，內嵌元素需加display:block轉換成塊元素才可以。

:first-line

跟first-letter類似。