卡卡網(wǎng)

偽元素和偽類，無論在名稱上還是語法上，都很相似，很多人剛接觸時容易混淆。本文將告訴你，弄清這兩點，你就知道偽元素與偽類的區(qū)別了。

1、語法的區(qū)別

按照規(guī)范，偽元素使用雙冒號（::），而偽類使用單個冒號（:），以便區(qū)分偽元素和偽類。

偽元素語法

selector::pseudo-element {
  property: value;
}

一個選擇器中只能使用一個偽元素。偽元素必須緊跟在語句中的簡單選擇器/基礎(chǔ)選擇器之后。

偽類語法

selector:pseudo-class {
  property: value;
}

類似于普通的類，你可以在一個選擇器中同時一起寫多個偽類。

2、概念的區(qū)別

偽元素

偽元素是一個附加至選擇器末的關(guān)鍵詞，允許你對被選擇元素的特定部分修改樣式，例如，下例中的 ::first-line 偽元素可改變段落首行文字的樣式。

/* 每一個 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

常見標(biāo)準(zhǔn)偽元素有::before (:before)，::after (:after)，::first-letter (:first-letter)，::first-line (:first-line)等。

偽類

偽類是添加到選擇器的關(guān)鍵字，指定要選擇的元素的特殊狀態(tài)。例如，:hover 可被用于在用戶將鼠標(biāo)懸停在按鈕上時改變按鈕的顏色。

/* 所有用戶指針懸停的按鈕 */
button:hover {
  color: blue;
}

常見標(biāo)準(zhǔn)偽類有:active，:hover，:checked，:enabled，:focus，:first，:first-child，:visited等。

總結(jié)

本文介紹了偽元素與偽類的區(qū)別，它們是兩個不同的但又看似相近的感念，在用法上是不同的，了解清楚之后，在使用中才不會混淆。

使用偽元素的好處多多，你可以用它來巧妙地創(chuàng)建一些自定義元素和小圖標(biāo)，如：

• 使用CSS創(chuàng)建自定義單選框radio
• 純CSS創(chuàng)建自定義復(fù)選框Checkbox
• 純CSS偽元素創(chuàng)建的84個小圖標(biāo)
• 漂亮的偽元素CSS按鈕5個實例代碼

標(biāo)簽: 偽元素  偽類