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

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

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

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

定義

偽類(lèi)：

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.

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

通過(guò)上面的概念我們知道了偽類(lèi)的功能有兩種：

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

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

偽元素：

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).

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

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

>>本文地址：http://liujunjsxg.cn/zhuanye/2020/52888.html

THE END  

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

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個(gè)方向的工作？

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

快速通道fast track

近期開(kāi)班時(shí)間TIME