偽類與偽元素的區別

林晨熙發表於2019-04-01

偽類與偽元素，傻傻分不清楚。

偽類(pseudo-classes)

官方定義:

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

其核心就是用來選擇那些不能夠被普通選擇器選擇的文件之外的元素，比如:hover。

偽元素(Pseudo-elements)

官方定義:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document.

其核心就是需要建立通常不存在於文件中的元素，比如::before。

看了它們的定義應該對它們之間的異同有所瞭解了吧，呵呵 ???...

偽類與偽元素的區別

  • 表示方法

    CSS2 中偽類、偽元素都是以單冒號:表示，CSS2.1 後規定偽類用單冒號表示，偽元素用雙冒號::表示，瀏覽器同樣接受 CSS2 時代已經存在的偽元素(:before, :after, :first-line, :first-letter 等)的單冒號寫法。對於 CSS2 之後所有新增的偽元素(如::selection)，應該採用雙冒號的寫法。但是因為相容性問題，大部分還是用的單冒號。

  • 定義不同

    偽類即假的類，通常可以新增類來達到效果，偽元素即假元素，需要通過新增元素才能達到效果。來看下面的例子

    例 1:將一行字串的首字母變成紅色

    現在不用偽元素應該如何實現？用 CSS slector 選擇？想了一晚上也沒想出來，既然沒法選擇也就沒法新增一個類來改變首字母的顏色。

    <p>I am snow</p>
複製程式碼

    新增元素試試，如下，建立一個元素 span 將首字母包裹起來，進而改變其顏色，成功了。這裡，關鍵點在於我們建立了新的元素達到了::first-letter的作用，且不能通過新增其他類來實現這一效果，因此將::first-letter叫做偽元素而不是偽類。

      <p><span style={{ color: red }}>I<span/> am snow</p>
複製程式碼

    例 2: 如下要將 I am snow 這句話變為紅色

    很簡單用:first-child，同樣新增一個類試試，顯然很容易達到同樣效果，我們並沒有建立新的元素只是新增了一個類.red-line，因此將:first-child叫做偽類而不是偽元素，儘管它和::first-letter在語義上十分相似。

    div:first-child {
 color: red;
}
或
.red-line {
   color: red;
}

<div class='red-line'>
 <p>I am snow</p>
<div>
複製程式碼

結論

  • 偽類和偽元素都是用來表示文件樹以外的"元素"。
  • 偽類和偽元素分別用單冒號:和雙冒號::來表示。
  • 偽類和偽元素的區別，最關鍵的點在於如果沒有偽元素(或偽類)，是否需要新增元素才能達到目的，如果是則是偽元素，反之則是偽類。

關於常用的偽類與偽元素選擇器可以檢視CSS選擇器一文。

相關文章