淺談css偽類和偽元素的區(qū)別、優(yōu)先級

css的偽類和偽元素在我們平常的工作中有著很廣泛的應(yīng)用，比如:hover、:active、:after等等，但是大部分人可能并不清楚偽類和偽元素的具體區(qū)別，所以我們今天來簡單的梳理一下。

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁設(shè)計師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁設(shè)計技術(shù)配合操作的協(xié)同工作。創(chuàng)新互聯(lián)專業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!

css偽類的定義

由于css2.1中偽類和偽元素的定位并無區(qū)別，所以我們直接引用css3中對于偽類的定義（引入來源w3c）

定義：

引入偽類概念是用于選擇不存在于DOM樹中的信息或那些不能夠通過常規(guī)css選擇器得到的信息。（比如:hover,:active就屬于不在于dom中的信息，nth-child()屬于不能夠通過常規(guī)css選擇器得到的信息）

偽類由“冒號”（:）+偽類的名稱和偽類括號內(nèi)的可選參數(shù)組成。（偽類括號內(nèi)的可選參數(shù)指:nth-child(n)里的n）

所有的常規(guī)選擇器都可以在任何位置使用偽類。偽類名稱不區(qū)分大小寫。一些偽類是互斥的，另一些偽類可以同時應(yīng)用于同一個元素。為了滿足用戶在操作DOM時產(chǎn)生的DOM結(jié)構(gòu)改變，偽類可以是動態(tài)的。

css偽元素的定義

定義：

偽元素用于創(chuàng)建和訪問文檔中不存在的抽象元素。例如，文檔語言不提供訪問元素內(nèi)容的第一個字母或第一行的機制。使用偽元素可以訪問到這些。偽元素還可以讓我們訪問文檔中原本不存在的抽象元素（例如，::before和::after）。

偽元素由兩個冒號（::）后跟偽元素的名稱組成。

::兩個冒號這種格式，是為了區(qū)別偽類和偽元素。與現(xiàn)有樣式表的兼容性，考慮到兼容性有部分偽元素可以同時使用1個或者2個冒號，（即:first-line，:first-letter，:before和:after）。對于css3中引入的新偽元素，則必須要使用2個冒號。

每個選擇器只能出現(xiàn)一個偽元素，并且偽元素要位于選擇器的后面。注意：此規(guī)范的未來版本可能允許每個選擇器使用多個偽元素。

css偽類和偽元素的區(qū)別

偽類和偽元素的語法結(jié)構(gòu)不同，偽類為冒號（:）加偽類名稱，偽元素為兩個冒號（::）加偽元素名稱，不過為了考慮兼容性(css2.1中偽類和偽元素都是一個冒號)，部分偽元素也支持一個冒號的寫法，例如（:after,:before,:first-line,:first-letter）。

一個選擇器只能使用一個偽元素，但是可以使用多個偽類。

偽類和偽元素的優(yōu)先級不同，大部分偽類為0-1-0，偽元素則為0-0-1。參考 css選擇器的優(yōu)先級

css偽類是什么意思？

CSS中用四個偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}

a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}

a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}

a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標(biāo)停在上方時、點下鼠標(biāo)時"的樣式。注意，必須按以上順序?qū)懀駝t顯示可能和你預(yù)想的不一樣。記住它們的順序是“LVHA”。

CSS偽類樣式（less父級選擇器&）

link是未訪問的時候，visited是已訪問的時候，hover是鼠標(biāo)移動到鏈接上時，active選定的時候

提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

同樣使用less樣式

偽類css樣式是否可以應(yīng)用于除超鏈接外的其他網(wǎng)頁元素？

可以的，偽類css不一定是用在超鏈接的，也可以用在您指定的類、id、或者網(wǎng)頁body內(nèi)的任意標(biāo)簽。比如： li：hover{} 、 p:hover{}等等。

標(biāo)題名稱：偽類css樣式,css偽元素和偽類
標(biāo)題來源：http://chinadenli.net/article1/dsisgid.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)頁設(shè)計公司、響應(yīng)式網(wǎng)站、定制開發(fā)、關(guān)鍵詞優(yōu)化、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)