淺談CSS 偽元素&偽類的妙用

在一個(gè)網(wǎng)頁(yè)中CSS占著非常重要的地位。近年來(lái)隨著CSS的發(fā)展,偽元素/偽類也開始被大量應(yīng)用:在性能愈加被看中的當(dāng)下,處于文檔流之外的CSS偽元素/偽類是當(dāng)之無(wú)愧的“無(wú)冕之王” !
下面筆者總結(jié)的一些關(guān)于CSS的“騷操作”,希望能對(duì)你有所幫助:
:hover和:focus顯示浮層
我們完全可以只用CSS的父子選擇器(用于“父子嵌套”)/兄弟選擇器(用于“同級(jí)并列排列”)+偽類 :hover
實(shí)現(xiàn)【當(dāng)鼠標(biāo)滑入顯示xxx】,甚至不用JS!比如:當(dāng)鼠標(biāo)滑入鏈接時(shí)顯示圖片
<a href="javascript:;">圖片鏈接</a> <img src="xxx" alt="" />
img{ visibility: hidden; position: absolute; transition: visibility .2s; /** 設(shè)置延時(shí) **/ } a:hover + img, img:hover{ visibility: visible; }
最后又加了 img:hover
是為了讓鼠標(biāo)在圖片上滑動(dòng)時(shí)也保持圖片的顯示狀態(tài) —— 防止圖片覆蓋鏈接顯示的情況。
但是這樣會(huì)在一種情況下“失效”:無(wú)鼠標(biāo)環(huán)境。比如:移動(dòng)端、智能設(shè)備。我們可以再為img加上偽類 :focus
來(lái)優(yōu)化體驗(yàn) —— 聚焦態(tài):
a:focus + img, img:focus{ visibility: visible; transition: none; }
:focus:hover
事實(shí)上,在下拉列表中。我不建議使用“非父子關(guān)系的并列元素” —— 如果你只是單純的使用css的話。問題就出在focus上::focus
只有在當(dāng)前元素處于聚焦?fàn)顟B(tài)時(shí)才匹配。那么,這就需要一系列方案去單純的解決這個(gè)問題,比如上面設(shè)置transition延時(shí)就是為了這個(gè)效果。但其實(shí)這還是“不算問題的問題”:因?yàn)闉g覽器支持了新規(guī)范::focus-within
,它規(guī)定“在當(dāng)前元素或是當(dāng)前元素的任意子元素處于聚焦?fàn)顟B(tài)時(shí)都會(huì)匹配”!它本質(zhì)上是一種“父選擇器行為”:
<div class="y-table"> <a href="javascript:;" class="y-msg">我的消息</a> <div class="cs-list"> <a href="javascript:;">我的回答</a> <a href="javascript:;">我的私信</a> <a href="javascript:;">我的訂單</a> <a href="javascript:;">我的關(guān)注</a> <a href="javascript:;">我的收藏</a> </div> </div>
:focus-within
:not()判斷顯示元素
在網(wǎng)頁(yè)的【搜索】按鈕中,有這樣一種場(chǎng)景:根據(jù)輸入的關(guān)鍵字顯示列表。筆者曾寫過(guò)一篇文章,用JavaScript闡述了其場(chǎng)景:(JavaScript)百度/Google 搜索的即時(shí)自動(dòng)補(bǔ)全功能究竟是如何“工作”的?
其實(shí)我們也可以用CSS的 :not()
來(lái)優(yōu)化顯示 —— 判斷不是xxx的符合條件的信息:
.list:not([class="show"]) { display: none; }
CSS3選擇器中,有一個(gè)叫做屬性選擇器的東西,有:[attr](有該屬性)
, [attr=xxx](屬性值是xxx)
, [attr^=xxx](屬性值是xxx開頭)
, [attr$=xxx](屬性值以xxx結(jié)尾)
, [attr*=xxx](屬性值包含xxx)
這些用法。
然后在篩選時(shí)根據(jù)“是不是符合條件”為返回列表的某些項(xiàng)動(dòng)態(tài)加上show類名。甚至我們可以配合“自定義數(shù)據(jù)屬性”:
:not
點(diǎn)擊按鈕顯示菊花圖
說(shuō)一個(gè)很常見的使用場(chǎng)景:在表單里,當(dāng)你點(diǎn)擊提交按鈕時(shí),如果能夠讓用戶看到“更多的反饋效果”似乎這個(gè)網(wǎng)頁(yè)會(huì)更受歡迎一些。那么,當(dāng)你“提交表單”時(shí)讓用戶知道自己再等待狀態(tài)似乎是個(gè)不錯(cuò)的選擇:
通過(guò)JavaScript控制類名,在點(diǎn)擊時(shí)給button按鈕施加loading-name,將其文字變透明,并將背景設(shè)置為一個(gè)loading圖!
當(dāng)你看到“點(diǎn)擊時(shí)”,我想你應(yīng)該有那么一瞬間要想到“偽類:focus”或者“偽類:active”,試著改寫一下吧!
:active實(shí)現(xiàn)“數(shù)據(jù)上報(bào)”
其實(shí)網(wǎng)頁(yè)中還有一個(gè)小問題:如果用戶禁用了JavaScript/瀏覽器不支持JavaScript怎么辦?當(dāng)然,后一種情況現(xiàn)在基本不會(huì)出現(xiàn),但是這確實(shí)是一種令人感到棘手的問題,并且吸引了大量前端開發(fā)者為之傾覆心血!
關(guān)于這個(gè)問題在筆者其他文章中也有提及,這里我們只說(shuō)下“數(shù)據(jù)上報(bào)”:如果沒有form也不支持JavaScript(沒法用ajax了?。┰趺磳?shù)據(jù)傳給后端?幸好有偽類 :active
—— 點(diǎn)擊態(tài)!它原來(lái)是只對(duì)a的,現(xiàn)在也支持所有HTML標(biāo)簽了。但是你可能會(huì)問了:這個(gè)偽類不是一般只用來(lái)改變鏈接的顏色什么的?單單只有這個(gè)元素當(dāng)然不行,但是不知道你有沒有想到【判斷點(diǎn)擊次數(shù)】這個(gè)經(jīng)典demo!
我們通常會(huì)將active和after結(jié)合使用:
即使你不相信,但它確實(shí)會(huì)向服務(wù)器發(fā)送一條請(qǐng)求,并將數(shù)據(jù)攜帶上傳!
這里為什么用url?如果不用圖片格式的話,after-content的字符串格式中只能寫固定值。
::after和::before的場(chǎng)景
作為偽元素/偽類中的“扛把子”,after和before怎么能不說(shuō)呢?他們的使用場(chǎng)景太多了:常見的“文字之間的‘|’符號(hào)”、“文字前后的橫線”、“一些特殊的圖案乃至組合圖案”中都能見到他們的身影:
一個(gè)“搜索圖標(biāo)”樣式的實(shí)現(xiàn)
一個(gè)純CSS實(shí)現(xiàn)的很炫酷的“loading”
到此這篇關(guān)于淺談CSS 偽元素&偽類的妙用的文章就介紹到這了,更多相關(guān)CSS 偽元素&偽類內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了CSS 列表模型之marker標(biāo)記的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-07-23
什么是BFC? CSS 使用偽元素清除浮動(dòng)的方法
塊級(jí)格式化上下文,是一個(gè)獨(dú)立的渲染區(qū)域,讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離,使內(nèi)外元素的定位不會(huì)相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動(dòng)的方2019-07-01- 本篇重點(diǎn)介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場(chǎng)景,如填充文本、作為iconfont、進(jìn)度線、時(shí)間線以及幾何圖形,感興趣的朋友一起看看吧2018-02-07
- before 和 after其實(shí)就是附著在元素前后的偽元素,說(shuō)他是偽元素的意思就是,元素不是在DOM中生成的,而是在瀏覽器渲染引擎渲染CSS的時(shí)候畫上去的,這篇文章主要給大家介紹2017-09-18
- 本文介紹了什么是 ::marker 以及它的一些實(shí)用場(chǎng)景,可以看出雖然 ::before 、::after 也能實(shí)現(xiàn)類似的功能,但 CSS 還是提供了更具有語(yǔ)義化的標(biāo)簽 ::marker,也表明了大家需2021-06-25