最全的css3偽類和偽元素詳解

如果您是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)者的老手,我想你肯定使用過偽類和偽元素。但我還是建議你去查看一下目錄表,可能其中的一兩項(xiàng)你之前沒有聽說(shuō)過。

偽類在W3C上的技術(shù)定義不是特別復(fù)雜,它基本上是一個(gè)服務(wù)于CSS的虛擬的聲明或者元素的一個(gè)具體特性。一些常用的偽類有:link, :visited, :hover, :active, :first-child 和 :nth-child。還有很多,我們一時(shí)看不完。

偽類通常是要以冒號(hào)開頭(:),然后是偽類的名稱,有時(shí)也會(huì)在括號(hào)里賦值。

現(xiàn)在,偽元素和真元素是一樣的了,我們可以把其當(dāng)做HTML中的常用元素來(lái)使用。但它并不在文件樹或者dom中,這就是說(shuō)我們不能對(duì)他們進(jìn)行分類,只能利用CSS來(lái)創(chuàng)建。

我會(huì)在文章的最后談一下一些常見的偽元素:after;before;fisrt letter.

偽元素用單冒號(hào)還是雙冒號(hào)?

把雙冒號(hào)(::)引入CSS3是為了使偽元素::before,::after和類似于:hover, :active區(qū)分開來(lái).除了IE8及以下版本,所有瀏覽器都支持偽元素中的雙引號(hào)。

也有一些偽元素只支持雙冒號(hào),例如::backdrop

就切版網(wǎng)而言,我們會(huì)使用單冒號(hào)標(biāo)記,因?yàn)檫@樣可以向后兼容傳統(tǒng)瀏覽器;當(dāng)然,如果要求使用雙冒號(hào)標(biāo)記,我也會(huì)在偽類中使用雙冒號(hào)的。

你可以自由選擇哪一種標(biāo)記,沒有絕對(duì)的對(duì)與錯(cuò)。

然而,在寫這篇文章的時(shí)候,說(shuō)明書要使用單冒號(hào)標(biāo)記,原因就是我上面提到過的向后兼容性。

注意,新的CSS寫偽元素的方法是使用雙冒號(hào)的,例如:a::after{...},這樣可以使他們和偽類區(qū)分開來(lái),有時(shí)你可以在CSS中看到。但是CSS3依然允許使用單冒號(hào)的偽元素,就為了是偽類向后兼容,現(xiàn)在我們已然建議你堅(jiān)持這種句法。

在這篇文章的標(biāo)題中,支持兩種冒號(hào)的偽元素會(huì)用兩種方式標(biāo)記出來(lái),只支持雙冒號(hào)的偽元素就以雙冒號(hào)的形式呈現(xiàn)。

什么時(shí)候使用(不使用)生成內(nèi)容呢?

生成內(nèi)容是通過連接CSS特性中的content和偽元素中的:before或:after來(lái)實(shí)現(xiàn)的。

這個(gè)content可能是純文本或者是一個(gè)容器,這些使我們可以通過CSS來(lái)呈現(xiàn)出的一個(gè)生動(dòng)的模塊或者裝飾性的元素。這里,我指的是第一種形式----文本。

如果為了裝飾而使用過多的生成內(nèi)容,那些支持CSS生成內(nèi)容的屏幕讀者會(huì)大聲讀出來(lái),這樣會(huì)導(dǎo)致UX的效果更加糟糕。

使用CSS生成內(nèi)容是為了裝飾或者一些不太重要的信息,但是屏幕讀者要正確使用,這樣可以保證擁有輔助技術(shù)的人不會(huì)混亂。在決定是否使用CSS合成內(nèi)容時(shí)要思考一下“漸進(jìn)增強(qiáng)”(Progressive Enhancement)。

實(shí)驗(yàn)性偽類和偽元素

一個(gè)偽類或偽元素是實(shí)驗(yàn)性的是指它的規(guī)格不是固定的,它的句法和行為是可以改變的。

然而我們現(xiàn)在可以通過應(yīng)用瀏覽器引擎前綴來(lái)是用偽類和偽元素。要做到這一點(diǎn),我們可以參考http://caniuse.com/或者一些自動(dòng)前綴的工具,例如自由前綴或者自動(dòng)前綴。

在這篇文章中你會(huì)看到緊鄰偽類和偽元素名稱的實(shí)驗(yàn)性標(biāo)簽。

偽類

當(dāng)用戶執(zhí)行一個(gè)動(dòng)作時(shí),狀態(tài)偽類會(huì)起作用。在連接還未被瀏覽時(shí),CSS中的"action"也可以寫成“no action”。

讓我們來(lái)看一下。

:LINK

偽類link:是鏈接的正常狀態(tài),通常是用來(lái)識(shí)別未被訪問過的鏈接。在分類中的其偽類沒有被識(shí)別前要生命:link,這四個(gè)的順序是這樣的:link, :visited, :hover,: active.Visited

:Visited 這個(gè)偽類用于已經(jīng)被訪問過的鏈接。按順序吧:visited這個(gè)軟件放在第二位(放在:link之后)

:HOVER

當(dāng)用戶的指針指到時(shí),hover用于定義元素的樣式。不必把鏈接加到hover上,盡管這是一種常用的方法。

hover應(yīng)該位于第三位(放在偽類:visited之后)

:ACTIVE

:active這個(gè)偽類是用于定義一個(gè)被“激活”的元素或者一個(gè)指定的設(shè)備,或者一個(gè)觸屏設(shè)備的按鍵,它可以被鍵盤激活,就像:foucus一樣。

它的運(yùn)行和:foucus 類似,不同之處在于::active是點(diǎn)擊鼠標(biāo)和松開鼠標(biāo)時(shí)起作用。

它應(yīng)該排在第四位,位于:hover之后

:FOCUS

偽類:focus是用來(lái)定義一個(gè)元素的樣式的,它已經(jīng)從指定設(shè)備,觸屏設(shè)備的界面或者鍵盤中獲得focus,是用來(lái)很多形式元素。

BONUS CONTENT: A SASS MIXIN FOR LINKS

如果你處理過CSS中的預(yù)處理程序,比如像Sass,那么bonus content可能會(huì)引發(fā)你的興趣。

如果你對(duì)CSS預(yù)處理程序沒有興趣---沒關(guān)系---你可以直接跳轉(zhuǎn)到結(jié)構(gòu)性的偽類部分。

秉著使工作流程最優(yōu)化的精神,下面是一個(gè)Sass mixin,我們可以創(chuàng)建一組基礎(chǔ)的鏈接。

在mixin背后的想法是在討論中沒有聲明缺省。所以,我們是被動(dòng)的,去聲明鏈接的4個(gè)階段。

:focus 和:active通常都是一塊聲明的,如果你想要分開,也可以分開。注意一點(diǎn):mixin是可以應(yīng)用于任何HTML元素中的,而不只是links。

結(jié)構(gòu)性偽類:

結(jié)構(gòu)性偽類以文件樹或者dom 樹種的傳統(tǒng)信息為目標(biāo),它不可以用其他類型的選擇器或者配合器所代替。

::FIRST-LETTER

First-letter是選擇一行文本中的第一個(gè)字母,如果一個(gè)元素包含在這一行的前面,例如圖片、視頻或者表格,那么首字母不會(huì)受影響并且可以被選擇出來(lái)。

它的這個(gè)特性可以用于段落當(dāng)中,例如,無(wú)需借助圖片或外部性能就增強(qiáng)排版的美觀度。

::FIRST-LINE

Firs-line 是用于定位元素中的第一行,它只在塊級(jí)元素中起作用。

當(dāng)用于段落的時(shí)候,只有第一行會(huì)有樣式,即使文本會(huì)轉(zhuǎn)行。

::SELECTION

:selection 是用于定義文本中被強(qiáng)調(diào)出來(lái)的那部分的樣式的。

::PLACEHOLDER

:placeholder 是利用HTML中的placeholder 特性來(lái)定位用于造型元素中的占位符文本。

It can also be written as ::input-placeholder, which is actually the syntax used in CSS.

它也可以寫成 ::input-placeholder,這實(shí)際上是CSS中的句法。

總結(jié)

CSS中的偽類和偽元素是不是很有用?他們的確給人們帶來(lái)了滿足感,但是這也是一個(gè)網(wǎng)絡(luò)設(shè)計(jì)者和開發(fā)者的生活。

請(qǐng)確保徹底測(cè)試徹底,但是真正應(yīng)用偽類和偽元素還有很長(zhǎng)的路要走。希望你能從這篇文章中有所收獲!同時(shí)不要忘記給它創(chuàng)建書簽哦。

----

文/切版網(wǎng)(www.qieban.cn)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容