CSS偽類(lèi)：
link：未被訪問(wèn)的鏈接
div:link{
//添加相關(guān)樣式，例如：背景\字體顏色、長(zhǎng)寬、字體大小等。
}
visited：被訪問(wèn)過(guò)后的樣式
div:visited{
//添加相關(guān)樣式，例如：背景\字體顏色、長(zhǎng)寬、字體大小等。
}
hover：鼠標(biāo)放上去的樣式
div:hover{
//添加相關(guān)樣式，例如：背景\字體顏色、長(zhǎng)寬、字體大小等。
}
active：點(diǎn)擊時(shí)的樣式
div:active{
//添加相關(guān)樣式，例如：背景\字體顏色、長(zhǎng)寬、字體大小等。
}
focus：向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式,當(dāng)點(diǎn)擊獲取焦點(diǎn)的時(shí)候，顯示相關(guān)樣式
input:focus
{
background-color:yellow;
}
first-child : 給第一個(gè)子元素添加樣式
div:first-child{
font-weight:bold
}
lang : 向帶有指定 lang 屬性的元素添加樣式
q:lang(no)
{
quotes: "~" "~"
}
<q lang="no">段落中的引用</q>
CSS偽元素
很能說(shuō)明問(wèn)題的圖片：
first-letter:
first-line:
before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:hover:before{
content:"add before";
color:yellow;
}
</style>
</head>
<body>
<p>正文</p>
</body>
</html>
after
除了可以在元素后面添加內(nèi)容以外，還可以用來(lái)清浮動(dòng)。
.clearfix{zoom:1;}
.clearfix:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
before和after還可以畫(huà)很多小圖標(biāo)，可以參考這個(gè)：http://www.cnblogs.com/ys-ys/p/5092760.html
有了以上偽類(lèi)、偽元素，原本需要取個(gè)class名和事件的地方可以省略，原本需要加個(gè)標(biāo)簽元素的地方也省了，這就是特它們存在的意義。
偽類(lèi)的效果可以通過(guò)添加一個(gè)實(shí)際的類(lèi)來(lái)達(dá)到，而偽元素的效果則需要通過(guò)添加一個(gè)實(shí)際的元素才能達(dá)到，這也是為什么他們一個(gè)稱(chēng)為偽類(lèi)，一個(gè)稱(chēng)為偽元素的原因。
css3為了明確偽類(lèi)和偽元素的區(qū)別，已經(jīng)明確了單冒號(hào)(:)用于CSS3偽類(lèi)，雙冒號(hào)(::)用于CSS3偽元素
偽元素和偽類(lèi)之所以這么容易混淆，是因?yàn)樗麄兊男Ч?lèi)似而且寫(xiě)法相仿，但實(shí)際上 css3 為了區(qū)分兩者，已經(jīng)明確規(guī)定了偽類(lèi)用一個(gè)冒號(hào)來(lái)表示，而偽元素則用兩個(gè)冒號(hào)來(lái)表示。
:Pseudo-classes
::Pseudo-elements
但因?yàn)榧嫒菪缘膯?wèn)題，所以現(xiàn)在大部分還是統(tǒng)一的單冒號(hào)，但是拋開(kāi)兼容性的問(wèn)題，我們?cè)跁?shū)寫(xiě)時(shí)應(yīng)該盡可能養(yǎng)成好習(xí)慣，區(qū)分兩者。
