5月安卓手機(jī)好評(píng)榜：魅族20 Pro奪冠
性能榜和性價(jià)比榜之后，我們來(lái)看最后的安卓手機(jī)好評(píng)榜，數(shù)據(jù)來(lái)源安兔兔評(píng)測(cè)，收集時(shí)間2023年5月1日至5月31日，僅限國(guó)內(nèi)市場(chǎng)。第一名：魅族20 Pro好評(píng)率：97.50%不得不感慨魅族老品牌還
:where() CSS 偽類函數(shù)接受選擇器列表作為它的參數(shù)，將會(huì)選擇所有能被該選擇器列表中任何一條規(guī)則選中的元素。
以下代碼，文本都會(huì)變成 yellow 顏色：
:where(div p) span { color: yellow;}<div class="test-div"> <span>哈哈</span></div><p class="test-p"> <span>哈哈</span></p>其實(shí) :where() 的功能本來(lái)就有，只不過(guò)有了它之后，實(shí)現(xiàn)起這些功能來(lái)就更加方便快捷~接下來(lái)就來(lái)講講它的組合/疊加功能。
我們來(lái)看下面的這段 css 代碼：
div a:hover,li a:hover,.cla a:hover,.aa .bb a:hover,[class^='bold'] a:hover{ color: yellow;}我們可以使用 :where()來(lái)簡(jiǎn)化這個(gè)寫法，使用它找出 div li .cla 這三種選擇器，選擇器可以是標(biāo)簽，也可以是類名，也可以是選擇器表達(dá)式：
:where(div, li, .cla, .a .b, [class^='bold']) a:hover { color:再來(lái)看看使用 :where() 的組合，完成一些功能，我們看以下的代碼：
.dark-theme button,.dark-theme a,.light-theme button,.light-theme a{ color: pink;}我們完全可以使用 :where() 簡(jiǎn)化這個(gè)寫法：
:where(.dark-theme, light-theme) :where(button, a) { color: pink;}:where()的優(yōu)先級(jí)是 0，我們可以看下面代碼：
.test { color: yellow;}:where(.test) { color: pink}最后字體顏色是 yellow。
全綠~
:is()跟:where()可以說(shuō)一模一樣，區(qū)別就是 :is()的優(yōu)先級(jí)不是0，而是由傳入的選擇器來(lái)決定的，拿剛剛的代碼來(lái)舉個(gè)例子：
div { color: yellow;}:where(.test) { color: pink}<div class="test">哈哈</div>這要是 :where()，那么字體顏色會(huì)是 yellow，因?yàn)樗膬?yōu)先級(jí)是 0。
但是如果是 :is()的話，字體顏色會(huì)是 pink，因?yàn)?類選擇器 優(yōu)先級(jí)比 標(biāo)簽選擇器 優(yōu)先級(jí)高~
:is(.test) { color: pink}div { color: yellow;}<div class="test">哈哈</div>全綠~
舉一個(gè)場(chǎng)景例子，我們看以下代碼，一個(gè)容器中，圖片是可以顯隱的，我想要實(shí)現(xiàn)：
<div class="container"> 哈哈哈哈哈 <img class="test-img" v-if="showImg"></img></div>如果按照以前的做法，就是使用 動(dòng)態(tài)class 的方式去玩完成這個(gè)功能，但是現(xiàn)在有 :has()可以通過(guò) css 的方式去完成這件事~
.container { font-size: 20px;}.container:has(img) { font-size: 12px;}或者.container:has(.test-img) { font-size: 12px;}現(xiàn)在又有兩個(gè)場(chǎng)景：
我們可以這么去實(shí)現(xiàn)：
.container:has(>img) { font-size: 12px;}.container:has(+img) { color: red;}再來(lái)一個(gè)場(chǎng)景，當(dāng)我 hover 到 子img 上時(shí)，我想要讓 container 的字體變粗，可以這么去使用~
.container:has(>img:hover) { color: red;}還是有一些瀏覽器不支持：
本文鏈接：http://www.tebozhan.com/showinfo-26-95543-0.html超實(shí)用的三個(gè)CSS偽類，直接少些幾十行CSS代碼
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)