css中的偽元素和偽類的區別

在使用css的時候經常分不清哪些是偽類，哪些是偽元素。可能知道怎麼用，但概念分不清。

今天想到這個問題了就自己總結了一下，方便以後檢視。

首先談談什麼是偽元素：偽元素不是實際存在的頁面元素，但是其用法和表現行為與真正的頁面元素是一樣的，可以對其使用諸如頁面一樣的css樣式。他的實質是css樣式展示的行為。

這裡先介紹以下偽類和偽元素中的：和:: 的區別，雙冒號是css3中出現的，用於區別偽類和偽元素，偽類使用單冒號，偽元素使用雙冒號。 在低版本瀏覽器中 :before是偽元素，但是在高版本瀏覽器中，:before會被自動識別偽::before。

偽元素主要包含以下幾個：

1、element::before

在元素的開頭新增乙個元素,該元素預設為行內元素，可以使用display轉化為塊級元素。

例如下面這段**，在div的前面插入一段文字內容。

注意：偽元素中的content是不能省略的。

div::before

在元素的結尾新增乙個元素,該元素預設為行內元素，可以使用display轉化為塊級元素。

下面這段**，在div的後面插入一段文字內容。

div::after

first-letter只能作用於塊級元素

::first-letter用於設定元素的首字母的樣式。

例如：設定p的第乙個字或者單詞字型大小為20px,顏色為hotpink。

p::first-letter

4、element::first-line

first-line只能作用於塊級元素

::first-line用於設定元素的第一行的樣式。

p::first-line

5、element::selection

用於設定選中元素或者高亮元素的樣式

::selection

::-moz-selection
p::selection

firefox 通過其私有屬性 ::-moz-selection 支援 。

由於偽模擬較多，這裡就不再乙個乙個介紹了，常見的有 :link、:visited、:hover、:active等等，除了上面介紹的五個偽元素，其他經常用到的基本上都是偽類。

css中偽類和偽元素的區別

偽類用於向某些選擇器新增特殊的效果。偽元素用於將特殊的效果新增到某些選擇器。偽類有 first child link vistited，hover，active，focus，lang 偽元素有 first line，first letter，before，after 使用偽類 1 2 3 4 5 6...

CSS 偽類和偽元素的區別

偽類和偽元素 css3規定，偽類由乙個冒號開始，然後為偽類的名稱。例如 after 偽元素由兩個冒號開始，然後為偽元素的名稱。例如 after 偽類的概念 偽類本質上是為了彌補常規css選擇器的不足，以便獲取到更多的資訊。通常表示獲取不存在與dom樹中的資訊，或獲取不能被常規css選擇器獲取的資訊。...

css 偽類和偽類元素的區別

偽類更多的定義的是狀態，如 hover，或者說是乙個可以使用css進行修飾的特定的特殊元素，如 first child 偽類用於當已有元素處於的某個狀態時，為其新增對應的樣式，這個狀態是根據使用者行為而動態變化的。當使用者懸停在指定的元素時，我們可以通過 hover 來描述這個元素的狀態。雖然它和普...