成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

AZmake / 1771人閱讀

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

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

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

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

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

偽類種類

偽元素種類

區(qū)別

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

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


    first
    second

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

.first-child {color: red}


    first
    second

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

p:first-letter {color: red}

I am stephen lee.

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

.first-letter {color: red}

I am stephen lee.

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

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

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

:Pseudo-classes
::Pseudo-elements

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/49499.html

相關(guān)文章

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

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

    jiekechoo 評論0 收藏0

  • CSS偽類偽元素詳解

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

    lookSomeone 評論0 收藏0

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

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

    X_AirDu 評論0 收藏0

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

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

    張遷 評論0 收藏0

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

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

    jeffrey_up 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<