什麼是偽類和偽元素？偽類和偽元素的區別的區別詳解

這篇文章帶給大家的內容是關於什麼是偽類和偽元素？偽類和偽元素的區別的區別詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1、偽類別類型

2、偽元素類型

（1）偽類別作用對像是整個元素

例如：

a:link
{color:#111}
a:hover
{color:#222}
div:first-child
{color:#333}
div:nth-child（3）
{color:#444}

儘管這些條件不是基於DOM的，但結果每一個都是作用於一個完整的元素，比如整個鏈接，段落，div等等。

（2）偽元素作用於元素的一部分

p::first-line
{color:#555}
p::first-letter
{color:#666}
a::before
{content : "hello
world";}

（3）偽元素作用於元素的一部分：一個段落的第一行或第一個字母。

總結：偽元素其實相當於偽造了一個元素，例如before,first-letter達到的效果就是偽造了一個元素，然後添加了其相應的效果而已；而偽類沒有偽造元素，例如first-child只是為子元素添加樣式而已。

偽元素和偽類之所以這麼容易混淆，是因為他們的效果類似而且寫法相仿，但實際上css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。

但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開相容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。

以上就是對什麼是偽類別和偽元素？偽類和偽元素的區別的區別詳解的全部介紹，希望大家可以有所收穫，更多HTML視頻教程請關注PHP中文網。

以上是什麼是偽類和偽元素？偽類和偽元素的區別的區別詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！