css3-虛擬元素與偽類

標籤：字元   樹結構   dom   簡單   css   樣本   添加   文本   ring   

虛擬元素用於定位文檔中包含的文本，但是它表示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); }

css3-虛擬元素與偽類