CSS 實用技巧:偽元素&偽類的妙用

在一個網頁中CSS占著非常重要的地位。近年來隨著CSS的發展,偽元素/偽類也開始被大量應用:在性能愈加被看中的當下,處於文檔流之外的CSS偽元素/偽類是當之無愧的“無冕之王” !

下面筆者總結的一些關於CSS的“騷操作”,希望能對你有所幫助:

:hover和:focus顯示浮層

我們完全可以隻用CSS的父子選擇器(用於“父子嵌套”)/兄弟選擇器(用於“同級並列排列”)+偽類 :hover 實現【當鼠標滑入顯示xxx】,甚至不用JS!比如:當鼠標滑入鏈接時顯示圖片

最後又加瞭 img:hover 是為瞭讓鼠標在圖片上滑動時也保持圖片的顯示狀態 —— 防止圖片覆蓋鏈接顯示的情況。

但是這樣會在一種情況下“失效”:無鼠標環境。比如:移動端、智能設備。我們可以再為img加上偽類 :focus 來優化體驗 —— 聚焦態:

上面的代碼想必你想到瞭更好的應用場景:純CSS實現下拉列表(二級菜單)

事實上,在下拉列表中。我不建議使用“非父子關系的並列元素” —— 如果你隻是單純的使用css的話。問題就出在focus上::focus 隻有在當前元素處於聚焦狀態時才匹配。那麼,這就需要一系列方案去單純的解決這個問題,比如上面設置transition延時就是為瞭這個效果。但其實這還是“不算問題的問題”:因為瀏覽器支持瞭新規范::focus-within,它規定“在當前元素或是當前元素的任意子元素處於聚焦狀態時都會匹配”!它本質上是一種“父選擇器行為”:

:not()判斷顯示元素

在網頁的【搜索】按鈕中,有這樣一種場景:根據輸入的關鍵字顯示列表。筆者曾寫過一篇文章,用JavaScript闡述瞭其場景:(JavaScript)百度/Google 搜索的即時自動補全功能究竟是如何“工作”的?

其實我們也可以用CSS的 :not() 來優化顯示 —— 判斷不是xxx的符合條件的信息:

CSS3選擇器中,有一個叫做屬性選擇器的東西,有:[attr](有該屬性), [attr=xxx](屬性值是xxx), [attr^=xxx](屬性值是xxx開頭), [attr$=xxx](屬性值以xxx結尾), [attr*=xxx](屬性值包含xxx) 這些用法。

然後在篩選時根據“是不是符合條件”為返回列表的某些項動態加上show類名。甚至我們可以配合“自定義數據屬性”:

點擊按鈕顯示菊花圖

說一個很常見的使用場景:在表單裡,當你點擊提交按鈕時,如果能夠讓用戶看到“更多的反饋效果”似乎這個網頁會更受歡迎一些。那麼,當你“提交表單”時讓用戶知道自己再等待狀態似乎是個不錯的選擇:

通過JavaScript控制類名,在點擊時給button按鈕施加loading-name,將其文字變透明,並將背景設置為一個loading圖!

當你看到“點擊時”,我想你應該有那麼一瞬間要想到“偽類:focus”或者“偽類:active”,試著改寫一下吧!

其實網頁中還有一個小問題:如果用戶禁用瞭JavaScript/瀏覽器不支持JavaScript怎麼辦?當然,後一種情況現在基本不會出現,但是這確實是一種令人感到棘手的問題,並且吸引瞭大量前端開發者為之傾覆心血!

關於這個問題在筆者其他文章中也有提及,這裡我們隻說下“數據上報”:如果沒有form也不支持JavaScript(沒法用ajax瞭啊)怎麼將數據傳給後端?幸好有偽類 :active —— 點擊態!它原來是隻對a的,現在也支持所有HTML標簽瞭。但是你可能會問瞭:這個偽類不是一般隻用來改變鏈接的顏色什麼的?單單隻有這個元素當然不行,但是不知道你有沒有想到【判斷點擊次數】這個經典demo!

我們通常會將active和after結合使用:

即使你不相信,但它確實會向服務器發送一條請求,並將數據攜帶上傳!

這裡為什麼用url?如果不用圖片格式的話,after-content的字符串格式中隻能寫固定值。

::after和::before的場景

作為偽元素/偽類中的“扛把子”,after和before怎麼能不說呢?他們的使用場景太多瞭:常見的“文字之間的‘|’符號”、“文字前後的橫線”、“一些特殊的圖案乃至組合圖案”中都能見到他們的身影:

发表回复

相关推荐

Excel常用函数的介绍

你没有看错哦,下面的内容是一份很好的Excel常用函数总结,也是工作中经常使用的函数操作,学习Excel常用函数,不要求你必须 ...

· 4分钟前

進口咖啡品牌排行榜前十名

作為上班族,咖啡簡直就是必備飲品。 早上上班,坐在辦公桌前做的第一件事就是給自己泡杯咖啡。 咖啡特有的香氣彌漫在空氣中...

· 30分钟前

大一工程化学复习

标准状态:系统中每种气体的分压为101.325kpa

· 33分钟前

给故人烧头七的意义

最近可能由于回答了一些关于生死的问题,于是很多人在后台都咨询了我相关烧头七以及能为故人做什么的问题。

· 36分钟前

藏族文化——紮西德勒

一、引言紮西德勒,吉祥如意之意,是藏族人民表示歡迎、問候、祝福等意的日常用語;紮西德勒,是藏語裡最吉祥、最能表達祝福...

· 42分钟前