關(guān)于CSS偽類與偽元素的定義與區(qū)別

2017-12-07 01:01 來源：項目加盟網(wǎng) 瀏覽量:514

藍(lán)鷗移動互聯(lián)網(wǎng)研發(fā)培訓(xùn)機(jī)構(gòu)

投資金額：1-3萬

企業(yè)名稱：藍(lán)鷗科技（武漢）有限公司

查看資料申請加盟

     估計很多朋友不是很清楚css的偽類和偽元素, 藍(lán)鷗武漢HTML5培訓(xùn)小編今天談?wù)勈裁词莻晤?什么是偽元素。關(guān)于css偽類和為元素的區(qū)別。
55dbca0c40d6f.jpg
官方解釋
      偽類一開始單單只是用來表示一些元素的動態(tài)狀態(tài)，典型的就是鏈接的各個狀態(tài)（LVHA）。隨后CSS2標(biāo)準(zhǔn)擴(kuò)展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標(biāo)識的“幽靈”分類。
偽元素則代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實(shí)際存在于文檔樹中。
       偽元素實(shí)際上在CSS1中就存在了，但是現(xiàn)在藍(lán)鷗武漢HTML5培訓(xùn)小編要跟大家所討論的:before和:after則發(fā)布于CSS2.1中。在最初,偽元素的語法是使用“:”（一個冒號），隨著web的發(fā)展，在CSS3中修訂后的偽元素使用“::”（兩個冒號），也就是::before 和 ::after—以區(qū)分偽元素和偽類（比如:hover，:active等）
雙冒號（::）和單冒號（:）的區(qū)別
所有支持CSS3的雙冒號（::）語法的瀏覽器都會支持單冒號（:）語法，但I(xiàn)E8只支持單冒號。建議只使用單冒號，以獲得最佳的瀏覽器支持。
雙冒號（::）是一種CSS3新語法，是用來將偽元素選擇器和偽元素區(qū)別開。如果不需要IE8支持，就用雙冒號（::）吧。
下面我們來看看具體來看看兩者的定義
偽類
偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)，或者說元素當(dāng)前所具有的特性，而不是元素的id、class、屬性等靜態(tài)的標(biāo)志。由于狀態(tài)是動態(tài)變化的，所以一個元素達(dá)到一個特定狀態(tài)時，它可能得到一個偽類的樣式；當(dāng)狀態(tài)改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類。
:link
偽類將應(yīng)用于未被訪問過的鏈接，與:visited互斥。
:hover
偽類將應(yīng)用于有鼠標(biāo)指針懸停于其上的元素。
:active
偽類將應(yīng)用于被激活的元素，如被點(diǎn)擊的鏈接、被按下的按鈕等。
:visited
偽類將應(yīng)用于已經(jīng)被訪問過的鏈接，與:link互斥。
注意:需要注意的是在CSS的定義中，同一個元素的:hover必須位于:link、:visited之后才能生效，:active必須位于:hover之后才能生效。
偽元素
與偽類針對特殊狀態(tài)的元素不同的是，偽元素是對元素中的特定內(nèi)容進(jìn)行操作，它所操作的層次比偽類更深了一層，也因此它的動態(tài)性比偽類要低得多。實(shí)際上，設(shè)計偽元素的目的就是去選取諸如元素內(nèi)容第一個字（母）、第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無法完成的工作。它控制的內(nèi)容實(shí)際上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文檔中，所以叫偽元素。
:first-letter
偽元素的樣式將應(yīng)用于元素文本的第一個字（母）。
:first-line
偽元素的樣式將應(yīng)用于元素文本的第一行。
:before
在元素內(nèi)容的最前面添加新內(nèi)容。
:after
在元素內(nèi)容的最后面添加新內(nèi)容。
:before和:after通常與CSS內(nèi)容生成配合使用。
以上就是關(guān)于CSS偽類與偽元素的定義與區(qū)別。藍(lán)鷗武漢培訓(xùn)中心,專注于Java培訓(xùn),HTML5培訓(xùn),PHP培訓(xùn),UI培訓(xùn),AR/VR培訓(xùn)等高端IT培訓(xùn),頂級師資授課,真實(shí)項目實(shí)戰(zhàn),名企高薪就業(yè)。

相關(guān)標(biāo)簽：

上一篇：糧寶扶貧積分備受各界矚目發(fā)布會在黔成功舉行

下一篇：十項技能幫助Web設(shè)計師領(lǐng)先于時代潮流