css 偽類與偽元素
1. 偽類別與偽元素
#css引入偽類別與偽元素概念是為了格式化文檔樹以外的資訊。也就是說，偽類和偽元素是用來修飾不在文件樹中的部分，例如，一句話中的第一個字母，或是清單中的第一個元素。以下分別對偽類別和偽元素進(jìn)行解釋：
偽類別用於當(dāng)已有元素處於的某個狀態(tài)時，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。比如說，當(dāng)使用者懸停在指定的元素時，我們可以透過:hover來描述這個元素的狀態(tài)。雖然它和普通的css類別相似，可以為現(xiàn)有的元素添加樣式，但是它只有處於dom樹無法描述的狀態(tài)下才能為元素添加樣式，所以稱為偽類。
偽元素用於建立一些不在文件樹中的元素，並為其新增樣式。比如說，我們可以透過:before來在一個元素前面增加一些文本，並為這些文本添加樣式。雖然使用者可以看到這些文本，但是這些文本實(shí)際上不在文件樹中。
#2. 偽類別與偽元素的差異
# 這裡透過兩個例子來說明兩者的差異。
以下是一個簡單的html清單片段：
##<ul>
? ?<li>我是第一個< ;/li> ? ?<li>我是第二</li>
</ul>
#如果想要為第一項(xiàng)新增樣式，可以在為第一個<li>新增一個類，並在該類別中定義對應(yīng)樣式：
HTML:
? ?<li class="first-item">我是第一個</li>
? CSS:
#li.first-item {color: orange}
如果不用加入類別的方法，我們可以透過給設(shè)定第一個<li>的:first-child偽類別來為其新增樣式。這時候，被修飾的<li>元素依然處於文檔樹。
HTML:
? ?<li>我是第一個</li>
#</ul>
如果想要為該段落的第一個字母添加樣式，可以在第一個字母中包裹一個<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;}
# 如果不建立一個<span>元素，我們可以透過設(shè)定<p>的:first-letter偽元素來為其添加樣式。這時候，看起來好像是創(chuàng)建了一個虛擬的<span>元素並添加了樣式，但實(shí)際上文檔樹中並不存在這個<span>元素。
HTML:
<p>Hello World, and wish you have a good day!</p>
CSS :
p:first-letter {font-size: 5em;}
從上述範(fàn)例可以看出，偽類的操作物件是文檔樹中已有的元素，而偽元素則建立了一個文檔數(shù)外的元素。因此，偽類別與偽元素的差別在於：有沒有建立一個文檔樹以外的元素。
偽類別與偽元素混淆的由來?最混淆的，可能是大部分人都將:before 和:after 這樣的偽元素隨口叫做偽類，而且即使在概念混淆的情況下，實(shí)際使用上也毫無問題——因?yàn)榧词垢拍罨煜?，對真正使用也不會造成多少麻?)?
CSS3規(guī)格中的要求使用雙冒號(::)表示偽元素，以此來區(qū)分偽元素和偽類，例如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類別使用單冒號(:)。除了一些低於IE8版本的瀏覽器外，大部分瀏覽器都支援偽元素的雙冒號(::)表示方法。
偽類別與偽元素的用法
##偽類別
1 :link ? ??#選擇未存取的連結(jié)
#2 :visited ? ? ?選擇已存取的連結(jié)
###3 :hover ? ?###選擇滑鼠指標(biāo)在其上浮動的元素#########4 : active ? ??###選擇活動的連結(jié)#######5 :focus ? ?選擇取得焦點(diǎn)的輸入欄位
:first - child 偽類別
符合元素的第一個子元素。
<!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 偽類
##一個否定偽類，用來符合不符合參數(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 偽類別
:lang比對設(shè)定了特定語言的元素，設(shè)定特定語言可以透過為了HTML元素設(shè)定lang=””屬性，設(shè)定meta元素的charset=””屬性，或是在http頭部設(shè)定語言屬性。
<!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在被選元素前插入內(nèi)容。需要使用content屬性來指定要插入的內(nèi)容。被插入的內(nèi)容實(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匹配元素中文字的首字母。被修飾的首字母不在文檔樹中。
<!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 觀察第一個字母</h1>
</body>
</html>######################::first-line/:first-line 偽元素#### ########:first-line符合元素中第一行的文字。這個偽元素只能用在區(qū)塊元素中，不能用在內(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>########## 
