第一個(gè)
  
第二個(gè)



li:first-child{color:orage;}

例二：

Hello World, and wish you have a good day!

想要給該段落第一個(gè)字母添加樣式，可以有以下方法：

（1）給第一個(gè)字母包裹元素，并給span設(shè)置樣式：

  Hello World, and wish you have a good day!
 


.first{color:red;}

（2）如果不創(chuàng)建元素，我們可以通過給

元素設(shè)置P:first-letter偽元素為其添加樣式，這時(shí)看起來像創(chuàng)建了一個(gè)虛擬的span元素并為其添加樣式，但實(shí)際上在DOM數(shù)中并不存在這個(gè)span元素

Hello World, and wish you have a good day!

p:first-letter{color:red;}

從上述例子中我們可以看出：偽類的操作對(duì)象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔樹外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個(gè)文檔樹之外的元素。

偽元素使用單冒號(hào)還是雙冒號(hào)？

css3規(guī)范中要求使用雙冒號(hào)（::）表示偽元素，以此來區(qū)分偽類和偽元素，比如::before和::after等偽元素使用雙冒號(hào)（::），:hover和:active偽類使用單冒號(hào)（:）。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(hào)(::)表示方法。

然而除了少部分偽元素如::backdrop必須使用雙冒號(hào)（::），大部分偽元素都支持單冒號(hào)和雙冒號(hào)的寫法，比如::after，寫成:after一樣可以正常運(yùn)行。

w3c標(biāo)準(zhǔn)中說到，雖然CSS3標(biāo)準(zhǔn)要求偽元素使用雙冒號(hào)的寫法，但也依然支持單冒號(hào)的寫法。為了向后兼容，我們建議你在目前還是使用單冒號(hào)的寫法。

常用偽類有：

:active 選擇正在被激活的元素（匹配指定狀態(tài)）

:hover 選擇被鼠標(biāo)懸浮著的元素（匹配指定狀態(tài)）

:link 選擇未被訪問的元素 （匹配指定狀態(tài)）

:visited 選擇已被訪問的元素（匹配指定狀態(tài)）

:first-child 選擇滿足是其父元素的第一個(gè)子元素的元素

:lang(value) 選擇帶有指定 lang 屬性的元素

:focus 選擇擁有鍵盤輸入焦點(diǎn)的元素

:enable 選擇每個(gè)已啟動(dòng)的元素

:disable 選擇每個(gè)已禁止的元素

:checked 選擇每個(gè)被選中的元素

:target 選擇當(dāng)前的錨點(diǎn)元素

:first-of-type 選擇滿足是其父元素的第一個(gè)某類型子元素的元素

:last-of-type 選擇滿足是其父元素的最后一個(gè)某類型子元素的元素

:only-of-type 選擇滿足是其父元素的唯一一個(gè)某類型子元素的元素

:nth-of-type(n) 選擇滿足是其父元素的第n個(gè)某類型子元素的元素

:nth-last-of-type(n) 選擇滿足是其父元素的倒數(shù)第n個(gè)某類型的元素

:only-child 選擇滿足是其父元素的唯一一個(gè)子元素的元素

:last-child 選擇滿足是其父元素的最后一個(gè)元素的元素

:nth-child(n) 選擇滿足是其父元素的第n個(gè)子元素的元素

:nth-last-child(n) 選擇滿足是其父元素的倒數(shù)第n個(gè)子元素的元素

:empty 選擇滿足沒有子元素的元素

:in-range 選擇滿足值在指定范圍內(nèi)的元素

:out-of-range 選擇值不在指定范圍內(nèi)的元素

:invalid 選擇滿足值為無效值的元素

:valid 選擇滿足值為有效值的元素

:not(selector) 選擇不滿足selector的元素

:optional 選擇為可選項(xiàng)的表單元素，即沒有“required”屬性

:read-only 選擇有"readonly"的表單元素

:read-write 選擇沒有"readonly"的表單元素

:root 選擇根元素

常用偽元素

::first-letter 選擇指定元素的第一個(gè)單詞

::first-line 選擇指定元素的第一行

::after 在指定元素的內(nèi)容前面插入內(nèi)容

::before 在指定元素的內(nèi)容后面插入內(nèi)容

::selection 選擇指定元素中被用戶選中的內(nèi)容

到此，相信大家對(duì)“css3的偽類和偽元素的區(qū)別有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！