CSS偽類：
Paste_Image.png
link：未被訪問的鏈接
div:link{
//添加相關(guān)樣式，例如：背景\字體顏色吞歼、長寬悼尾、字體大小等。
}
visited：被訪問過后的樣式
div:visited{
//添加相關(guān)樣式，例如：背景\字體顏色、長寬、字體大小等嘴拢。
}
hover：鼠標(biāo)放上去的樣式
div:hover{
//添加相關(guān)樣式，例如：背景\字體顏色寂纪、長寬炊汤、字體大小等。
}
active：點擊時的樣式
div:active{
//添加相關(guān)樣式弊攘，例如：背景\字體顏色、長寬姑曙、字體大小等襟交。
}
focus：向擁有鍵盤輸入焦點的元素添加樣式,當(dāng)點擊獲取焦點的時候，顯示相關(guān)樣式
input:focus
{
background-color:yellow;
}
first-child : 給第一個子元素添加樣式
div:first-child{
font-weight:bold
}
lang : 向帶有指定 lang 屬性的元素添加樣式
q:lang(no)
{
quotes: "~" "~"
}
<q lang="no">段落中的引用</q>
CSS偽元素
Paste_Image.png
很能說明問題的圖片：
first-letter:
Paste_Image.png
first-line:
Paste_Image.png
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)容以外伤靠，還可以用來清浮動捣域。
.clearfix{zoom:1;}
.clearfix:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
before和after還可以畫很多小圖標(biāo)，可以參考這個：http://www.cnblogs.com/ys-ys/p/5092760.html
有了以上偽類宴合、偽元素焕梅，原本需要取個class名和事件的地方可以省略，原本需要加個標(biāo)簽元素的地方也省了卦洽，這就是特它們存在的意義贞言。
偽類的效果可以通過添加一個實際的類來達(dá)到，而偽元素的效果則需要通過添加一個實際的元素才能達(dá)到阀蒂，這也是為什么他們一個稱為偽類该窗，一個稱為偽元素的原因弟蚀。
css3為了明確偽類和偽元素的區(qū)別，已經(jīng)明確了單冒號(:)用于CSS3偽類酗失，雙冒號(::)用于CSS3偽元素
偽元素和偽類之所以這么容易混淆义钉，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區(qū)分兩者规肴，已經(jīng)明確規(guī)定了偽類用一個冒號來表示捶闸，而偽元素則用兩個冒號來表示。
:Pseudo-classes
::Pseudo-elements
但因為兼容性的問題拖刃，所以現(xiàn)在大部分還是統(tǒng)一的單冒號删壮，但是拋開兼容性的問題，我們在書寫時應(yīng)該盡可能養(yǎng)成好習(xí)慣序调，區(qū)分兩者醉锅。
