CSS3偽類和偽元素

mozillazg 發(fā)布于2019-04-23 13:35 / 696人閱讀

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

這是數(shù)字1 這是數(shù)字2

這是數(shù)字3

這是數(shù)字4

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