400-650-7353
您所在的位置：首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】CSS中偽類和偽元素的區(qū)別

【W(wǎng)eb前端基礎(chǔ)知識】CSS中偽類和偽元素的區(qū)別

  • 發(fā)布： Web前端培訓(xùn)
  • 來源：Web前端干貨資料
  • 2020-08-21 14:46:19
  • 閱讀()
  • 分享
  • 手機端入口

偽類和偽元素的區(qū)別，其實很簡單，從字面上就可以理解。它們有一個共同的修飾詞“偽”，那么“偽”是什么意思呢?就是假的。所以，偽類就是假的類，偽元素就是假的元素，這就是在字面上它們之間的區(qū)別。

定義

偽類：

CSS3給出的定義是：

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.

大致翻譯過來的意思就是：偽類存在的意義是為了通過選擇器，格式化DOM樹以外的信息以及不能被常規(guī)CSS選擇器獲取到的信息。

通過上面的概念我們知道了偽類的功能有兩種：

1.格式化DOM樹以外的信息。比如： 標簽的:link、:visited 等。這些信息不存在于DOM樹中。

2.不能被常規(guī)CSS選擇器獲取到的信息。比如：要獲取第一個子元素，我們無法用常規(guī)的CSS選擇器獲取，但可以通過 :first-child 來獲取到。

偽元素：

CSS3給出的定義如下：

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 (e.g., the ::before and ::after pseudo-elements give access to generated content).

大致翻譯過來的意思就是：偽元素可以創(chuàng)建一些文檔語言無法創(chuàng)建的虛擬元素。比如：文檔語言沒有一種機制可以描述元素內(nèi)容的第一個字母或第一行，但偽元素可以做到(::first-letter、::first-line)。同時，偽元素還可以創(chuàng)建源文檔不存在的內(nèi)容，比如使用 ::before 或 ::after。

文章“【W(wǎng)eb前端基礎(chǔ)知識】CSS中偽類和偽元素的區(qū)別”已幫助 人

>>本文地址：http://hqfphsz.com/zhuanye/2020/52888.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有，未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個方向的工作？

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計室內(nèi)設(shè)計
  • 平面設(shè)計平面設(shè)計
  • 電商設(shè)計電商設(shè)計
  • 網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計
  • 全鏈路UI/UE設(shè)計UI設(shè)計
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發(fā)智能機器人
 

快速通道fast track

近期開班時間TIME