成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

jiekechoo / 700人閱讀

摘要：之前寫了一篇詳解屬性的博文，當(dāng)時(shí)自己沒(méi)分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸兄指正了我的錯(cuò)誤，所以今天打算好好研究下兩者的區(qū)別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區(qū)別這里用偽類和偽元素來(lái)進(jìn)行比較。

之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當(dāng)時(shí)自己沒(méi)分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸 @riophae 兄指正了我的錯(cuò)誤，所以今天打算好好研究下兩者的區(qū)別。
首先，閱讀 w3c 對(duì)兩者的定義：

CSS 偽類用于向某些選擇器添加特殊的效果。

CSS 偽元素用于將特殊的效果添加到某些選擇器。

可以明確兩點(diǎn)，第一兩者都與選擇器相關(guān)，第二就是添加一些“特殊”的效果。這里特殊指的是兩者描述了其他 css 無(wú)法描述的東西。

偽類種類

偽元素種類

區(qū)別

這里用偽類 :first-child 和偽元素 :first-letter 來(lái)進(jìn)行比較。

p>i:first-child {color: red}


    first
    second

//偽類 :first-child 添加樣式到第一個(gè)子元素
如果我們不使用偽類，而希望達(dá)到上述效果，可以這樣做：

.first-child {color: red}


    first
    second

即我們給第一個(gè)子元素添加一個(gè)類，然后定義這個(gè)類的樣式。那么我們接著看看為元素：

p:first-letter {color: red}

I am stephen lee.

//偽元素 :first-letter 添加樣式到第一個(gè)字母
那么如果我們不使用偽元素，要達(dá)到上述效果，應(yīng)該怎么做呢？

.first-letter {color: red}

I am stephen lee.

即我們給第一個(gè)字母添加一個(gè) span，然后給 span 增加樣式。
兩者的區(qū)別已經(jīng)出來(lái)了。那就是：

  
偽類的效果可以通過(guò)添加一個(gè)實(shí)際的類來(lái)達(dá)到，而偽元素的效果則需要通過(guò)添加一個(gè)實(shí)際的元素才能達(dá)到，這也是為什么他們一個(gè)稱為偽類，一個(gè)稱為偽元素的原因。
總結(jié)

偽元素和偽類之所以這么容易混淆，是因?yàn)樗麄兊男Ч愃贫覍懛ㄏ喾拢珜?shí)際上 css3 為了區(qū)分兩者，已經(jīng)明確規(guī)定了偽類用一個(gè)冒號(hào)來(lái)表示，而偽元素則用兩個(gè)冒號(hào)來(lái)表示。

:Pseudo-classes
::Pseudo-elements

但因?yàn)榧嫒菪缘膯?wèn)題，所以現(xiàn)在大部分還是統(tǒng)一的單冒號(hào)，但是拋開兼容性的問(wèn)題，我們?cè)跁鴮憰r(shí)應(yīng)該盡可能養(yǎng)成好習(xí)慣，區(qū)分兩者。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110898.html

相關(guān)文章

  • 詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

    摘要：之前寫了一篇詳解屬性的博文，當(dāng)時(shí)自己沒(méi)分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸兄指正了我的錯(cuò)誤，所以今天打算好好研究下兩者的區(qū)別。偽元素用于將特殊的效果添加到某些選擇器。偽類種類偽元素種類區(qū)別這里用偽類和偽元素來(lái)進(jìn)行比較。 之前寫了一篇 《詳解 CSS 屬性 - :before && :after》 的博文，當(dāng)時(shí)自己沒(méi)分清楚偽元素和偽類，所以在文章內(nèi)把概念混淆了，慶幸 @ri...

    AZmake 評(píng)論0 收藏0

  • CSS偽類偽元素詳解

    摘要：選擇器大致可以分成類基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。但偽類和偽元素相對(duì)比較抽象，稍微有一點(diǎn)點(diǎn)理解上的難度。本篇就是我對(duì)偽類和偽元素的理解。 CSS選擇器大致可以分成5類：基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。基本，層次，屬性選擇器比較容易理解，畢竟它們選擇的對(duì)象都屬于DOM中看得見摸得著的元素。但偽類和偽元素相對(duì)比較抽象，稍微有一點(diǎn)點(diǎn)理解上的難度。本篇就是...

    lookSomeone 評(píng)論0 收藏0

  • CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

    摘要：一的用法如同對(duì)偽元素的名稱一樣，是用來(lái)給指定的元素的內(nèi)容前面插入新的內(nèi)容。二偽類和偽元素的區(qū)別偽類種類偽元素種類偽類作用對(duì)象是整個(gè)元素例如盡管這些條件不是基于的，但結(jié)果每一個(gè)都是作用于一個(gè)完整的元素，比如整個(gè)鏈接，段落，等等。 一：:before && :after的用法 :before 如同對(duì)偽元素的名稱一樣，:before 是用來(lái)給指定的元素的內(nèi)容前面插入新的內(nèi)容。舉例說(shuō)明： .b...

    X_AirDu 評(píng)論0 收藏0

  • 我終于理解了偽類和偽元素

    摘要：偽類和偽元素，對(duì)于絕大多數(shù)同學(xué)來(lái)說(shuō)，都是耳熟能詳?shù)拿?，但確實(shí)又有很多人搞不清楚它們之間的區(qū)別，以致于混淆概念。除了上面這個(gè)本質(zhì)區(qū)別以外，在中，偽類用單冒號(hào)表示而偽元素用雙冒號(hào)表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對(duì)于絕大多數(shù)同學(xué)來(lái)說(shuō)，都是耳熟能詳?shù)拿?，但確實(shí)又有很多人搞不清楚它們之間...

    張遷 評(píng)論0 收藏0

  • css偽類和偽元素的區(qū)別，:before和::before的區(qū)別

    摘要：偽類用于選擇樹之外的信息，或是不能用簡(jiǎn)單選擇器進(jìn)行表示的信息。比如表示選擇元素內(nèi)容的之前內(nèi)容，也就是表示選擇元素被選中的內(nèi)容。是的寫法，是的寫法。偽類用于選擇DOM樹之外的信息，或是不能用簡(jiǎn)單選擇器進(jìn)行表示的信息。前者包含那些匹配指定狀態(tài)的元素，比如:visited，:active；后者包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child，:first-of-type，:...

    jeffrey_up 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<