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ū)分兩者。