css僞類及僞元素用法

注：該表引自W3School教程

僞元素的分類及做用：

接下來讓博主經過一些生動的實例（以前的做業或小做品）來講明幾種經常使用僞類的用法和效果，其餘的讀者能夠本身嘗試：

 

:active 

大體效果爲用鼠標點擊時，元素增長特效，鼠標鬆開時，特效消失。多用在按鈕的點擊上。

 寫法：

這裏id爲box的是一div塊，在css中首先設置了他的基本樣式，下面爲加入:active僞類後須要修改的樣式。

未點擊時： 點擊以後：

:active、:hover、:focus這幾種經常使用僞類寫法一致，下面就再也不贅述。爲了直觀貼上幾張GIF，方便你們理解。

正如以前所說的:active常常用在按鈕的點擊上：

大體寫法就是：在點擊以後讓按鈕的座標下移1-2像素並縮小外部陰影，由此給人一種立體的感受。固然，你們能夠發揮想象，充分利用僞類來作出最炫的交互。

 

:hover

當咱們須要對某一對象添加當鼠標懸浮之上時改變樣式，就能夠用到:hover僞類。

這裏仍是用按鈕來作演示：

 

當光標放在按鈕上，按鈕的背景色和文字顏色作一反色並加上漸變，這種效果簡單但吸引人。固然你們也能夠隨着不斷學習挑戰更加炫酷的效果。 

這裏多說一句：

:hover的好搭檔cursor屬性，當屬性值爲pointer時，如上上圖，光標覆蓋目標時會變成手型。cursor還有url屬性，其爲設置圖片地址。

在以後用javascript或者HTML5作遊戲時，系統的光標就顯得格格不入了。這裏能夠經過cursor將光標變成你想要的手型圖片，好比這樣的：

此時cursor屬性能夠放在全局body{}裏或者任何你須要的地方。

 

:focus

當咱們須要讓點擊以後的元素一直擁有某些樣式，這時用:active就不行了，由於鬆開鼠標樣式會消失。:focus能夠用在<input>標籤上。

這是以前作過一簡單的表單：

:focus與以前僞類所產生的來不同的效果：

 

:first-child

對元素的第一個子元素添加樣式，經常使用在ol,ul下面的li，或者tr下面的td或th上等等。

效果：

實際中經常使用到的地方：

 在實際編寫頁面上，常常會有像上圖同樣的佈局。多個圖片並排放在一行，對於多個樣式類似並排的元素咱們一般將其放在列表標籤裏的<li></li>中，這時咱們能夠先在li的樣式中用margin-right來設置li之間的間距既每張圖間的間距，以後在li的:first-child中經過margin-left來設置第一張與左邊界的距離，從而調整好整排圖片或元素在網頁中的佈局。

 

僞元素:before和:after

 兩者的做用爲在元素以前或以後插入某些內容，注意：這裏的「先後」並非位置上的先後，而是文檔流裏的先後。

一般狀況下用來作這個：

這個：

以及這個：

都是一些指引型的小三角或者小箭頭之類的。

代碼：

經過給一div附上某一小圖標，而後設置與該div的相關位置。

content中的內容參見unicode幾何圖形列表，因爲過大就不在這裏貼了，只截取一小部分展現下，有興趣的朋友百度吧。

固然！！before及after的用法毫不這麼簡單!

你能夠將content屬性設置爲「」，而後盡情發揮想象：

 

這裏不只用了:hover，按鈕外部的光圈就是經過:before作出來的。

 

感謝您的瀏覽，但願能對您有所幫助。

---

本文轉載自他人，爲尊重原創附上原文連接：https://www.cnblogs.com/ghost-xyx/p/3763669.html