css虛擬元素

來源:互聯網
上載者:User

 

偽類

 :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類似。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.