首頁  >  文章  >  web前端  >  css3的偽類和偽元素的差別是什麼

css3的偽類和偽元素的差別是什麼

青灯夜游
青灯夜游原創
2021-12-22 10:54:045458瀏覽

區別:1、偽類用於已有元素處於某種狀態時為其添加對應的樣式,而偽元素用於創建一些不在DOM樹中的元素並為其添加樣式;2、偽元素會建立一個文檔樹以外的元素,偽類別不會;3、偽元素使用雙冒號「::」表示,偽類別使用單冒號「:」表示。

css3的偽類和偽元素的差別是什麼

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

什麼是偽類別和偽元素

#提到「偽」字,你想到了什麼? “假的”,“汪精衛偽政府”,“不存在的”······

偽類:用於已有元素處於某種狀態時(滑動、點擊等)為其添加對應的樣式,這個狀態是根據使用者行為而動態變化的。我的理解就是:本身不存在,只有在特定的情況(滑動、點擊)下才會被觸發的狀態,可以用css去修飾這個狀態下的物件。例如:當使用者懸停在指定元素時,可以透過:hover來描述這個元素的狀態,雖然它和一般css相似,可以為已有元素添加樣式,但是它只有處於DOM樹無法描述的狀態下才能為元素添加樣式,所以稱為偽類。

偽元素:用於建立一些不在DOM樹中的元素,並為其添加樣式。例如,我們可以透過:before來在一個元素之前添加一些文本,並為這些文本添加樣式,雖然用戶可以看見這些文本,但是它實際上並不在DOM文檔中。

偽類別與偽元素的差異:

請看下面範例:

範例一:

#
<ul>
 <li>第一列</li>
 <li>第二列</li>
</ul>

如果我們想要為第一列新增樣式,我們可以透過以下兩種方式:

(1)為第一列新增一個類,並在該類中定義樣式:

<ul>
  <li class="first-item">第一列</li> 
  <li>第二列</li></ul>
</ul>

.first-item{color:orange;}

(2)如果不用添加類別的方法,我們可以透過給第一個25edfb22a4f469ecb59f1190150159c6設定: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)給第一個字母包裹45a2772a6b6107b401db3c9b82c049c2元素,並為span設定樣式:

<p>
  <span class="first">H</span>ello World, and wish you have a good day!
</p> 


.first{color:red;}

(2)如果不建立45a2772a6b6107b401db3c9b82c049c2元素,我們可以透過給e388a4556c0f65e1904146cc1a846bee元素設定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 選擇指定元素中被使用者選取的內容

(學習影片分享:css影片教學

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn