css3偽類和偽元素有哪些

本文小編為大家詳細介紹“css3偽類和偽元素有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“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偽類和偽元素有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。