css 偽類(lèi)和偽元素
1. 偽類(lèi)與偽元素
css引入偽類(lèi)和偽元素概念是為了格式化文檔樹(shù)以外的信息。也就是說(shuō)，偽類(lèi)和偽元素是用來(lái)修飾不在文檔樹(shù)中的部分，比如，一句話中的第一個(gè)字母，或者是列表中的第一個(gè)元素。下面分別對(duì)偽類(lèi)和偽元素進(jìn)行解釋?zhuān)?/p>
偽類(lèi)用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的。比如說(shuō)，當(dāng)用戶懸停在指定的元素時(shí)，我們可以通過(guò):hover來(lái)描述這個(gè)元素的狀態(tài)。雖然它和普通的css類(lèi)相似，可以為已有的元素添加樣式，但是它只有處于dom樹(shù)無(wú)法描述的狀態(tài)下才能為元素添加樣式，所以將其稱(chēng)為偽類(lèi)。
偽元素用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式。比如說(shuō)，我們可以通過(guò):before來(lái)在一個(gè)元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹(shù)中。
2. 偽類(lèi)與偽元素的區(qū)別
這里通過(guò)兩個(gè)例子來(lái)說(shuō)明兩者的區(qū)別。
下面是一個(gè)簡(jiǎn)單的html列表片段：
<ul>
? ?<li>我是第一個(gè)</li>
? ?<li>我是第二個(gè)</li>
</ul>
? 如果想要給第一項(xiàng)添加樣式，可以在為第一個(gè)<li>添加一個(gè)類(lèi)，并在該類(lèi)中定義對(duì)應(yīng)樣式：
HTML:
<ul>
? ?<li class="first-item">我是第一個(gè)</li>
? ?<li>我是第二個(gè)</li>
</ul>
? CSS:
li.first-item {color: orange}
如果不用添加類(lèi)的方法，我們可以通過(guò)給設(shè)置第一個(gè)<li>的:first-child偽類(lèi)來(lái)為其添加樣式。這個(gè)時(shí)候，被修飾的<li>元素依然處于文檔樹(shù)中。
HTML:
<ul>
? ?<li>我是第一個(gè)</li>
? ?<li>我是第二個(gè)</li>
</ul>
CSS:
li:first-child {color: orange}
下面是另一個(gè)簡(jiǎn)單的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要給該段落的第一個(gè)字母添加樣式，可以在第一個(gè)字母中包裹一個(gè)<span>元素，并設(shè)置該span元素的樣式：
HTML:
<p><span class="first">H</span>ello World, and wish you have a good day!</p>
CSS:
.first?{font-size: 5em;}
如果不創(chuàng)建一個(gè)<span>元素，我們可以通過(guò)設(shè)置<p>的:first-letter偽元素來(lái)為其添加樣式。這個(gè)時(shí)候，看起來(lái)好像是創(chuàng)建了一個(gè)虛擬的<span>元素并添加了樣式，但實(shí)際上文檔樹(shù)中并不存在這個(gè)<span>元素。
HTML:
<p>Hello World, and wish you have a good day!</p>
CSS:
p:first-letter {font-size: 5em;}
從上述例子中可以看出，偽類(lèi)的操作對(duì)象是文檔樹(shù)中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔數(shù)外的元素。因此，偽類(lèi)與偽元素的區(qū)別在于：有沒(méi)有創(chuàng)建一個(gè)文檔樹(shù)之外的元素。
偽類(lèi)和偽元素混淆的由來(lái)?
最為混淆的，可能是大部分人都將 :before 和 :after 這樣的偽元素隨口叫做偽類(lèi)，而且即使在概念混淆的情況下，實(shí)際使用上也毫無(wú)問(wèn)題——因?yàn)榧词垢拍罨煜?，?duì)真正使用也不會(huì)造成多少麻煩:)?
CSS3規(guī)范中的要求使用雙冒號(hào)(::)表示偽元素，以此來(lái)區(qū)分偽元素和偽類(lèi)，比如::before和::after等偽元素使用雙冒號(hào)(::)，:hover和:active等偽類(lèi)使用單冒號(hào)(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(hào)(::)表示方法。
偽類(lèi)與偽元素的用法
偽類(lèi)
1 :link ? ??選擇未訪問(wèn)的鏈接
2 :visited ? ? ?選擇已訪問(wèn)的鏈接
3 :hover ? ?選擇鼠標(biāo)指針浮動(dòng)在其上的元素
4 :active ? ??選擇活動(dòng)的鏈接
5 :focus ? ?選擇獲取焦點(diǎn)的輸入字段
:first - child 偽類(lèi)
匹配元素的第一個(gè)子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>php.cn</title>
<style type="text/css">
li:first-child {
color: orange;
}
</style>
<body>
<ul>
<li>這里的文本是橙色的</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:not 偽類(lèi)
一個(gè)否定偽類(lèi)，用于匹配不符合參數(shù)選擇器的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>php.cn</title>
<style type="text/css">
li:not(.first-item) {
color: orange;
}
</style>
<body>
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:lang 偽類(lèi)
:lang匹配設(shè)置了特定語(yǔ)言的元素，設(shè)置特定語(yǔ)言可以通過(guò)為了HTML元素設(shè)置lang=””屬性，設(shè)置meta元素的charset=””屬性，或者是在http頭部上設(shè)置語(yǔ)言屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>php.cn</title>
<style type="text/css">
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '?' '?'; }
:lang(de) q { quotes: '?' '?'; }
</style>
<body>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
</body>
</html>偽元素
::before/:before 偽元素
:before在被選元素前插入內(nèi)容。需要使用content屬性來(lái)指定要插入的內(nèi)容。被插入的內(nèi)容實(shí)際上不在文檔樹(shù)中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>php.cn</title>
<style type="text/css">
h1:before {
content: "Hello ";
}
</style>
<body>
<h1>World</h1>
</body>
</html>::after/:after 偽元素
:after在被元素后插入內(nèi)容，其用法和特性與:before相似。
::first-letter/:first-letter 偽元素
:first-letter匹配元素中文本的首字母。被修飾的首字母不在文檔樹(shù)中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>php.cn</title>
<style type="text/css">
h1:first-letter {
color:#ff0000;
font-size:xx-large;
}
</style>
<body>
<h1>World 觀察第一個(gè)字母</h1>
</body>
</html>::first-line/:first-line 偽元素
:first-line匹配元素中第一行的文本。這個(gè)偽元素只能用在塊元素中，不能用在內(nèi)聯(lián)元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<title>php.cn</title>
<style type="text/css">
p:first-line {
background: orange;
}
</style>
<body>
<p>Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }，
to set them apart from pseudo-classes. You may see this sometimes in CSS.
CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility，
and we would advise that you stick with this syntax for the time being.</p>
</body>
</html>
