CSS中偽元素&偽類有什么用
本文將為大家詳細(xì)介紹“CSS中偽元素&偽類有什么用”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會更新不同的知識點(diǎn)，希望這篇“CSS中偽元素&偽類有什么用”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。
成都創(chuàng)新互聯(lián)是專業(yè)的舟山網(wǎng)站建設(shè)公司，舟山接單;提供成都網(wǎng)站設(shè)計、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行舟山網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
在一個網(wǎng)頁中CSS占著非常重要的地位。近年來隨著CSS的發(fā)展，偽元素/偽類也開始被大量應(yīng)用：在性能愈加被看中的當(dāng)下，處于文檔流之外的CSS偽元素/偽類是當(dāng)之無愧的“無冕之王” ！
:hover和:focus顯示浮層
我們完全可以只用CSS的父子選擇器（用于“父子嵌套”）/兄弟選擇器（用于“同級并列排列”）+偽類 :hover 實(shí)現(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)化體驗(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è)置transition延時就是為了這個效果。但其實(shí)這還是“不算問題的問題”：因?yàn)闉g覽器支持了新規(guī)范：:focus-within，它規(guī)定“在當(dāng)前元素或是當(dāng)前元素的任意子元素處于聚焦?fàn)顟B(tài)時都會匹配”！它本質(zhì)上是一種“父選擇器行為”：
我的消息
我的回答
我的私信
我的訂單
我的關(guān)注
我的收藏
:focus-within
:not()判斷顯示元素
在網(wǎng)頁的【搜索】按鈕中，有這樣一種場景：根據(jù)輸入的關(guān)鍵字顯示列表。筆者曾寫過一篇文章，用JavaScript闡述了其場景：（JavaScript）百度/Google 搜索的即時自動補(bǔ)全功能究竟是如何“工作”的？
其實(shí)我們也可以用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ù)“是不是符合條件”為返回列表的某些項(xiàng)動態(tài)加上show類名。甚至我們可以配合“自定義數(shù)據(jù)屬性”：
:not
點(diǎn)擊按鈕顯示菊花圖
說一個很常見的使用場景：在表單里，當(dāng)你點(diǎn)擊提交按鈕時，如果能夠讓用戶看到“更多的反饋效果”似乎這個網(wǎng)頁會更受歡迎一些。那么，當(dāng)你“提交表單”時讓用戶知道自己再等待狀態(tài)似乎是個不錯的選擇：
通過JavaScript控制類名，在點(diǎn)擊時給button按鈕施加loading-name，將其文字變透明，并將背景設(shè)置為一個loading圖！
當(dāng)你看到“點(diǎn)擊時”，我想你應(yīng)該有那么一瞬間要想到“偽類:focus”或者“偽類:active”，試著改寫一下吧！
:active實(shí)現(xiàn)“數(shù)據(jù)上報”
其實(shí)網(wǎng)頁中還有一個小問題：如果用戶禁用了JavaScript/瀏覽器不支持JavaScript怎么辦？當(dāng)然，后一種情況現(xiàn)在基本不會出現(xiàn)，但是這確實(shí)是一種令人感到棘手的問題，并且吸引了大量前端開發(fā)者為之傾覆心血！
關(guān)于這個問題在筆者其他文章中也有提及，這里我們只說下“數(shù)據(jù)上報”：如果沒有form也不支持JavaScript（沒法用ajax了?。┰趺磳?shù)據(jù)傳給后端？幸好有偽類 :active —— 點(diǎn)擊態(tài)！它原來是只對a的，現(xiàn)在也支持所有HTML標(biāo)簽了。但是你可能會問了：這個偽類不是一般只用來改變鏈接的顏色什么的？單單只有這個元素當(dāng)然不行，但是不知道你有沒有想到【判斷點(diǎn)擊次數(shù)】這個經(jīng)典demo！
我們通常會將active和after結(jié)合使用：
即使你不相信，但它確實(shí)會向服務(wù)器發(fā)送一條請求，并將數(shù)據(jù)攜帶上傳！
這里為什么用url？如果不用圖片格式的話，after-content的字符串格式中只能寫固定值。
::after和::before的場景
作為偽元素/偽類中的“扛把子”，after和before怎么能不說呢？他們的使用場景太多了：常見的“文字之間的‘|’符號”、“文字前后的橫線”、“一些特殊的圖案乃至組合圖案”中都能見到他們的身影：
:after
一個“搜索圖標(biāo)”樣式的實(shí)現(xiàn)
一個純CSS實(shí)現(xiàn)的很炫酷的“l(fā)oading”
如果你能讀到這里，小編希望你對“CSS中偽元素&偽類有什么用”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會，具體使用情況還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前名稱：CSS中偽元素&偽類有什么用
網(wǎng)站鏈接：
http://weahome.cn/article/jcdihd.html
重慶分公司
重慶分公司
