css3偽類和偽元素是什麼意思
在css3中，偽類是一種用於已有元素處於某種狀態時為其新增對應樣式的選擇器，且這個狀態是根據使用者行為而動態變化的；而偽元素的意思為"假元素"或者"偽裝元素"，是一個用於建立一些不在DOM樹中的元素，併為其新增樣式的選擇器。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
偽類是什麼
偽類是一種用於已有元素處於某種狀態時（滑動、點選等）為其新增對應樣式的選擇器，且這個狀態是根據使用者行為而動態變化的。
例如：當使用者懸停在指定元素時，可以通過:hover來描述這個元素的狀態，雖然它和一般css相似，可以為已有元素新增樣式，但是它只有處於DOM樹無法描述的狀態下才能為元素新增樣式，所以稱為偽類。
偽元素是什麼
偽元素直義理解就是"假元素"或者"偽裝元素"。其實也可以這麼理解， 偽元素實際上就是虛擬的元素，不存在的元素(code形式), 你也無發在檔案中找到他們，因此說偽元素是虛擬元素。
偽元素是一個用於建立一些不在DOM樹中的元素，併為其新增樣式的選擇器。
通過偽元素您不需要藉助元素的 ID 或 class 屬性就可以對被選擇元素的特定部分定義樣式。例如通過偽元素您可以設定段落中第一個字母的樣式，或者在元素之前、之後插入一些內容等等。
偽類和偽元素的區別：
請看下面例子：
例一：
<ul> <li>第一列</li> <li>第二列</li> </ul>
如果我們想要給第一列新增樣式，我們可以通過以下兩種方式：
（1）給第一列新增一個類，並在該類中定義樣式：
<ul> <li class="first-item">第一列</li> <li>第二列</li></ul> </ul>
.first-item{color:orange;}（2）如果不用新增類的方法，我們可以通過給第一個<li>設定:first-child偽類來為其新增樣式，這時，被修飾的li依然存在於DOM樹中
<ul> <li>第一個</li> <li>第二個</li> </ul>
li:first-child{color:orage;}例二：
<p>Hello World, and wish you have a good day!</p>
想要給該段落第一個字母新增樣式，可以有以下方法：
（1）給第一個字母包裹<span>元素，並給span設定樣式：
<p> <span class="first">H</span>ello World, and wish you have a good day! </p>
.first{color:red;}（2）如果不建立<span>元素，我們可以通過給<p>元素設定P:first-letter偽元素為其新增樣式，這時看起來像建立了一個虛擬的span元素併為其新增樣式，但實際上在DOM數中並不存在這個span元素
<p>Hello World, and wish you have a good day!</p>
p:first-letter{color:red;}從上述例子中我們可以看出：偽類的操作物件是檔案樹中已有的元素，而偽元素則建立了一個檔案樹外的元素。因此，偽類與偽元素的區別在於：有沒有建立一個檔案樹之外的元素。
偽元素使用單冒號還是雙冒號？
css3規範中要求使用雙冒號（::）表示偽元素，以此來區分偽類和偽元素，比如::before和::after等偽元素使用雙冒號（::），:hover和:active偽類使用單冒號（:）。除了一些低於IE8版本的瀏覽器外，大部分瀏覽器都支援偽元素的雙冒號(::)表示方法。
然而除了少部分偽元素如::backdrop必須使用雙冒號（::），大部分偽元素都支援單冒號和雙冒號的寫法，比如::after，寫成:after一樣可以正常執行。
w3c標準中說到，雖然CSS3標準要求偽元素使用雙冒號的寫法，但也依然支援單冒號的寫法。為了向後相容，我們建議你在目前還是使用單冒號的寫法。
常用偽類有：
:active 選擇正在被啟用的元素（匹配指定狀態）
:hover 選擇被滑鼠懸浮著的元素（匹配指定狀態）
:link 選擇未被存取的元素 （匹配指定狀態）
:visited 選擇已被存取的元素（匹配指定狀態）
:first-child 選擇滿足是其父元素的第一個子元素的元素
:lang(value) 選擇帶有指定 lang 屬性的元素
:focus 選擇擁有鍵盤輸入焦點的元素
:enable 選擇每個已啟動的元素
:disable 選擇每個已禁止的元素
:checked 選擇每個被選中的元素
:target 選擇當前的錨點元素
:first-of-type 選擇滿足是其父元素的第一個某型別子元素的元素
:last-of-type 選擇滿足是其父元素的最後一個某型別子元素的元素
:only-of-type 選擇滿足是其父元素的唯一一個某型別子元素的元素
:nth-of-type(n) 選擇滿足是其父元素的第n個某型別子元素的元素
:nth-last-of-type(n) 選擇滿足是其父元素的倒數第n個某型別的元素
:only-child 選擇滿足是其父元素的唯一一個子元素的元素
:last-child 選擇滿足是其父元素的最後一個元素的元素
:nth-child(n) 選擇滿足是其父元素的第n個子元素的元素
:nth-last-child(n) 選擇滿足是其父元素的倒數第n個子元素的元素
:empty 選擇滿足沒有子元素的元素
:in-range 選擇滿足值在指定範圍內的元素
:out-of-range 選擇值不在指定範圍內的元素
:invalid 選擇滿足值為無效值的元素
:valid 選擇滿足值為有效值的元素
:not(selector) 選擇不滿足selector的元素
:optional 選擇為可選項的表單元素，即沒有「required」屬性
:read-only 選擇有"readonly"的表單元素
:read-write 選擇沒有"readonly"的表單元素
:root 選擇根元素
常用偽元素
::first-letter 選擇指定元素的第一個單詞
::first-line 選擇指定元素的第一行
::after 在指定元素的內容前面插入內容
::before 在指定元素的內容後面插入內容
::selection 選擇指定元素中被使用者選中的內容
（學習視訊分享：）
以上就是css3偽類和偽元素是什麼意思的詳細內容，更多請關注TW511.COM其它相關文章！