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

資訊專欄INFORMATION COLUMN

CSS3偽類和偽元素

mozillazg / 733人閱讀
作為一個(gè)CSS3初學(xué)不久者來(lái)說(shuō)，很容易混淆單冒號(hào)（:）和雙冒號(hào)（::）的用法，以為兩者可以互換著來(lái)使用。我自己之前也混淆過(guò)他們，因?yàn)閮烧呖雌饋?lái)太相像了，就像孿生兄弟。但實(shí)際上，他們的區(qū)別還是挺大的，最多算得上近房親戚。 下面我們來(lái)開始講講單冒號(hào)（:）偽類和雙冒號(hào)（::）偽元素有什么相同和不同點(diǎn)（另外在CSS2中單冒號(hào)“:” 也叫做偽對(duì)象，具體可看看http://www.mb5u.com/tool/css2/） ? 單冒號(hào)（:）早在CSS中已經(jīng)存在了，相信用慣CSS的碼農(nóng)肯定對(duì):hover偽類并不陌生。另外還有幾個(gè)比較實(shí)用的偽類，例如： 與鏈接訪問(wèn)有關(guān)的 :link(未被點(diǎn)擊過(guò)的鏈接)，:visited（鏈接已被點(diǎn)擊訪問(wèn)過(guò)） 與鍵盤輸入有關(guān)的 :focus(獲得鍵盤輸入焦點(diǎn)) 其他像 :lang偽類，:first-child偽類，大家可以自行到W3C官網(wǎng)看看具體用法，在這里我就不贅述了。特別說(shuō)一下 :first-child偽類，這個(gè)偽類很有意思，不得不佩服制定規(guī)則的人的洞察力，CSS3出現(xiàn)了類似用法的偽類，為開發(fā)者提供了不少方便。 ? 其實(shí)，偽類和偽元素在CSS中已經(jīng)存在，而CSS3為了區(qū)分偽類和偽元素，偽元素采用雙冒號(hào)寫法。偽類和偽元素都對(duì)特定元素進(jìn)行選擇，前者重在對(duì)元素狀態(tài)的描述，而后者更重在對(duì)元素本身的描述，這是偽類和偽元素內(nèi)在的聯(lián)系和區(qū)別。 ? 一、CSS3偽類 CSS3偽類又分為兩類：狀態(tài)偽類和結(jié)構(gòu)性偽類。 CSS3狀態(tài)偽類沿用了我們上面已經(jīng)提及過(guò)的CSS中的:hover ，:link ，:visited 等偽類。另一方面CSS3中大幅增加狀態(tài)偽類，例如： :first-child 選擇某個(gè)元素的第一個(gè)子元素； :last-child 選擇某個(gè)元素的最后一個(gè)子元素； :nth-child(index)根據(jù)數(shù)量選擇某個(gè)元素的一個(gè)特定子元素，括號(hào)中填寫索引值 :nth-of-type(index)根據(jù)類型選擇某個(gè)元素的一個(gè)特定子元素，這個(gè)偽類與:nth-child()最大的不同點(diǎn)就在于是按類型來(lái)選擇子元素的，而不是一股腦的什么子元素都算在內(nèi)。 給個(gè)例子吧： html:
這是數(shù)字1 這是數(shù)字2

這是數(shù)字3

這是數(shù)字4

? css: div:nth-child（1）{color:blue;} 只會(huì)讓第一個(gè)span元素的顏色變藍(lán) ? div:nth-of-type(2){color:red;} 則會(huì)使第二個(gè)span元素和第二個(gè)p元素的顏色都變紅，原因是把div的子元素分成了兩類，一類是span元素，另外一類是p元素。 ? 二、CSS3偽元素 CSS中已經(jīng)有的偽元素 :first-letter ，:first-line ，CSS2中新增的偽元素 :after ，:before CSS3中將上面的4個(gè)偽元素的單冒號(hào)變成雙冒號(hào)，另外還新增了::selection偽元素。 下面來(lái)講講CSS3中這幾個(gè)偽元素的一些常見功能 (1)::first-letter和::first-line :first-letter和:first-line分別對(duì)文字的第一個(gè)字母和第一行進(jìn)行選擇，這個(gè)從英文直接翻譯過(guò)來(lái)是不難理解的，報(bào)刊上的第一個(gè)文字大寫處理就可以用::first-letter。下面重點(diǎn)談?wù)劻硗鈳讉€(gè)偽元素 （2）::before和::after ::before和::after后面經(jīng)常跟著content，用于在css渲染中向元素的頭部或尾部添加內(nèi)容。很關(guān)鍵的一點(diǎn)是添加的這些內(nèi)容不會(huì)出現(xiàn)在DOM中，僅僅是作為css渲染層對(duì)元素進(jìn)行修改。所以不要用::before或::after展示有實(shí)際意義的內(nèi)容，而僅僅使用它們顯示修飾性內(nèi)容，例如在文字前面加上icon圖標(biāo)。至于怎么添加和添加有什么前提條件，又可以寫一篇文章了。下次有空再來(lái)寫寫這個(gè)用法。 ? ? 關(guān)于兼容性問(wèn)題： 由于IE對(duì)CSS3的支持問(wèn)題，所以在寫代碼時(shí)也要注意一些小問(wèn)題。如果只需要兼容firefox、webkit、opera等瀏覽器，偽元素采用雙冒號(hào)的寫法是沒多大問(wèn)題的，但是如果需要兼容IE瀏覽器，那么還是用單冒號(hào)的寫法比較穩(wěn)妥。 ?

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

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

相關(guān)文章

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

    摘要：偽類和偽元素，對(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

  • css3偽類和偽元素你都懂了嗎

    摘要：什么是偽類偽類用于定義元素的特殊狀態(tài)。例如，它可用于當(dāng)用戶將鼠標(biāo)懸停在元素上時(shí)為其設(shè)置樣式訪問(wèn)和未訪問(wèn)的鏈接不同樣式在獲得焦點(diǎn)時(shí)設(shè)置元素的樣式偽類的語(yǔ)法后代選擇器匹配作為指定元素后代的所有元素。 什么是偽類？ 偽類用于定義元素的特殊狀態(tài)。 例如，它可用于： 當(dāng)用戶將鼠標(biāo)懸停在元素上時(shí)為其設(shè)置樣式 訪問(wèn)和未訪問(wèn)的鏈接不同樣式 在獲得焦點(diǎn)時(shí)設(shè)置元素的樣式 偽類的語(yǔ)法 后代選擇器匹配作為...

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

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

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<