僞元素和僞類

css僞類用於向某些選擇器添加特殊的效果

css僞元素用於將特殊的效果添加到某些選擇器

 

 

僞類種類

:active	將樣式添加到被激活的元素
:focus	將樣式添加到被選中的元素
：hover	鼠標懸浮在上方
：link	未被訪問過的連接
：visited	被訪問過的連接
：first-child	特殊的樣式添加到元素第一個子元素
：lang	容許創做者來定義指定的元素中使用的語言

 

 

僞元素種類

：first-letter	將特殊的樣式添加到文本的首字母
：first-line	將特殊的樣式添加到文本的首
：before	在某元素以前插入某些內容
：after	在某元素以後插入某些內容

 

區別

僞類的效果能夠經過添加一個實際的類來達到，而僞元素的效果則須要經過添加一個實例才能達到，這樣式他們爲何一個稱爲僞類，一個稱爲僞元素的緣由

 

 

總結

僞元素和僞類之因此這麼容易混淆，是由於他們的效果相似並且寫法相仿，但實際上css3爲了區分二者，已經明確規定了僞類用一個冒號來表示，而僞元素則用兩個冒號來表示

 

但由於兼容性的問題，因此如今大部分仍是統一的單冒號，可是拋開兼容性的問題，咱們在書寫時應該儘量養成好習慣，區分二者

 

 

僞元素的使用

css僞元素::after用來建立一個僞元素，做爲已選中元素的最後一個子元素。一般會配合content屬性來爲該元素添加裝飾內容。這個虛擬元素默認是行內元素

a::after{

     content:"->";

     background-color:red;

     border-color:black;

     border-style:dotted;    

}

 

 

提示用法

attr()   css表達式和一個自定義數據屬性data-descr建立一個存css，詞彙表提示工具

span[data-descr]:hover::after{

content:attr(data-desrc);

將屬性爲data-desrc的屬性值變爲僞元素

//這裏寫僞元素的樣式

}

 

content:url(連接)

content:"("attr(href)")"    //感受是字符串和變量鏈接在一塊兒

清除浮動

實現多張背景圖片

作一些動畫

a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right:  -10px; }