css3-僞元素與僞類

僞元素用於定位文檔中包含的文本，可是它表示DOM外部的某種文檔結構

僞類:

僞類存在的意義是爲了經過選擇器找到那些不存在於DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。簡單來講，獲取不存在與DOM樹中的信息。好比<a>標籤的:link、visited等，這些信息不存在於DOM樹結構中，只能經過CSS選擇器來獲取；獲取不能被常規CSS選擇器獲取的信息。好比僞類:target，它的做用是匹配文檔(頁面)的URI中某個標誌符的目標元素。

常見的僞類和僞元素

下面看一下僞元素中最經常使用的before和after：

::before：選擇器在被選元素的內容前面插入內容

::after     選擇器在被選元素的內容後面插入內容

必須使用 content 屬性來指定要插入的內容，不然僞元素沒有任何意義。

content屬性有幾個很是有用的取值

 [String] – 使用引號包括一段字符串，將會向元素內容中添加字符串。示例：

 #example:before {

content: "#";
display: block;
width: 100px;
height: 100px;
}　

  attr() – 調用當前元素的屬性，能夠方便的好比將圖片的 Alt 提示文字或者連接的 Href 地址顯示出來。示例：

a:after { content:"(" attr(href) ")"; }

 url() / uri() – 用於引用媒體文件。示例：

h1::before { content: url(logo.png); }