CSS中如何使用偽元素和偽類

CSS中如何使用偽元素和偽類，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)公司服務(wù)項目包括大興網(wǎng)站建設(shè)、大興網(wǎng)站制作、大興網(wǎng)頁制作以及大興網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，大興網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到大興省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

:hover和:focus顯示浮層

我們完全可以只用CSS的父子選擇器(用于“父子嵌套”)/兄弟選擇器(用于“同級并列排列”)+偽類 :hover 實現(xiàn)【當(dāng)鼠標(biāo)滑入顯示xxx】，甚至不用JS!比如：當(dāng)鼠標(biāo)滑入鏈接時顯示圖片

圖片鏈接

img{       visibility: hidden;       position: absolute;       transition: visibility .2s;  /** 設(shè)置延時 **/ } a:hover + img, img:hover{   visibility: visible; }

最后又加了 img:hover 是為了讓鼠標(biāo)在圖片上滑動時也保持圖片的顯示狀態(tài) —— 防止圖片覆蓋鏈接顯示的情況。

但是這樣會在一種情況下“失效”：無鼠標(biāo)環(huán)境。比如：移動端、智能設(shè)備。我們可以再為img加上偽類 :focus 來優(yōu)化體驗 —— 聚焦態(tài)：

a:focus + img, img:focus{     visibility: visible;     transition: none; }

CSS中如何使用偽元素和偽類

:focus:hover

上面的代碼想必你想到了更好的應(yīng)用場景：純CSS實現(xiàn)下拉列表(二級菜單)

事實上，在下拉列表中。我不建議使用“非父子關(guān)系的并列元素” —— 如果你只是單純的使用css的話。問題就出在focus上：:focus 只有在當(dāng)前元素處于聚焦?fàn)顟B(tài)時才匹配。那么，這就需要一系列方案去單純的解決這個問題，比如上面設(shè)置transition延時就是為了這個效果。但其實這還是“不算問題的問題”：因為瀏覽器支持了新規(guī)范：:focus-within，它規(guī)定“在當(dāng)前元素或是當(dāng)前元素的任意子元素處于聚焦?fàn)顟B(tài)時都會匹配”!它本質(zhì)上是一種“父選擇器行為”：

      我的消息                 我的回答           我的私信           我的訂單           我的關(guān)注           我的收藏

.cs-list{   display: none;   position: absolute;   border: 1px solid red;   background-color: #fff; } .y-table:focus-within .cs-list{   display: block; }

CSS中如何使用偽元素和偽類

:focus-within

:not()判斷顯示元素

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

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

.list:not([class="show"]) { display: none; }

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

然后在篩選時根據(jù)“是不是符合條件”為返回列表的某些項動態(tài)加上show類名。甚至我們可以配合“自定義數(shù)據(jù)屬性”：

CSS中如何使用偽元素和偽類

:not

點擊按鈕顯示菊花圖

說一個很常見的使用場景：在表單里，當(dāng)你點擊提交按鈕時，如果能夠讓用戶看到“更多的反饋效果”似乎這個網(wǎng)頁會更受歡迎一些。那么，當(dāng)你“提交表單”時讓用戶知道自己再等待狀態(tài)似乎是個不錯的選擇：

CSS中如何使用偽元素和偽類

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

CSS中如何使用偽元素和偽類

當(dāng)你看到“點擊時”，我想你應(yīng)該有那么一瞬間要想到“偽類:focus”或者“偽類:active”，試著改寫一下吧!

:active實現(xiàn)“數(shù)據(jù)上報”

其實網(wǎng)頁中還有一個小問題：如果用戶禁用了JavaScript/瀏覽器不支持JavaScript怎么辦?當(dāng)然，后一種情況現(xiàn)在基本不會出現(xiàn)，但是這確實是一種令人感到棘手的問題，并且吸引了大量前端開發(fā)者為之傾覆心血!

關(guān)于這個問題在筆者其他文章中也有提及，這里我們只說下“數(shù)據(jù)上報”：如果沒有form也不支持JavaScript(沒法用ajax了啊)怎么將數(shù)據(jù)傳給后端?幸好有偽類 :active —— 點擊態(tài)!它原來是只對a的，現(xiàn)在也支持所有HTML標(biāo)簽了。但是你可能會問了：這個偽類不是一般只用來改變鏈接的顏色什么的?單單只有這個元素當(dāng)然不行，但是不知道你有沒有想到【判斷點擊次數(shù)】這個經(jīng)典demo!

我們通常會將active和after結(jié)合使用：

CSS中如何使用偽元素和偽類