誰動了我的選擇器？深入那些小眾又好用的css選擇器
01 前言
選擇器是開發(fā)網(wǎng)站寫樣式時(shí)必須用到的知識點(diǎn)，如果你有關(guān)注css每年的發(fā)展?fàn)顟B(tài)報(bào)告的話，不難發(fā)現(xiàn)，這幾年出現(xiàn)了很多很好用的css選擇器。css選擇器發(fā)展到今日，可以說是一個(gè)非常龐大的體系了，接下來我主要聊聊那些好用卻又很少被人熟知的選擇器。
02 :is() 和 :where()
先來看?:is() 和 :where()。Elad Shechter?曾在推特上發(fā)了一個(gè)關(guān)于?:is()?和?:where()?選擇器的測試題：如果你是第一次看到這樣的測試題，請先自測一下，如果是你，你會選擇哪個(gè)答案(green，purple，red 還是 blue)?
如果你選擇的是?purple?，那么要恭喜你，你答對了。
示例中出現(xiàn)了 :is() 和:where() 兩個(gè)可能你從未接觸過的偽類選擇器,那么這兩個(gè)選擇器是什么，有什么作用呢?:is()：偽類將選擇器列表作為參數(shù)，并選擇該列表中任意一個(gè)選擇器可以選擇的元素。這對于以更緊湊的形式編寫大型選擇器非常有用。:where()：偽類接受選擇器列表作為它的參數(shù)，將會選擇所有能被該選擇器列表中任何一條規(guī)則選中的元素。:is() 和 :where() 的區(qū)別：:where()：的優(yōu)先級總是為0，但是?:is()?的優(yōu)先級是由它的選擇器列表中優(yōu)先級最高的選擇器決定的。接下來我們通過一些簡單的案例來感受一下:is()選擇器的優(yōu)點(diǎn)。
03 在沒有:is()之前的寫法
案例一
案例二
04 使用:is() 之后的寫法
案例一
案例二使用:is() 代碼就會顯得更簡潔
05 :not()
相信大家平時(shí)在開發(fā)前端頁面的時(shí)候，碰到類似下圖這樣的需求：
希望最后一張卡片沒有margin-bottom（或第一張卡片沒有?margin-top。針對于這樣的場景，:not()?選擇器就非常有優(yōu)勢。為什么這么說呢？
在沒有 :not() 選擇器的時(shí)候，你可能會想到下面這樣的方式：
如果換成 :not() 選擇器，可以這要來實(shí)現(xiàn)：
06 :has()
:has()選擇器是匹配含指定元素的父元素
雖然 CSS 選擇器已經(jīng)非常強(qiáng)大了，但一直以來，在 CSS 中沒有通過子元素選到父元素的樣的選擇器(父選擇器)之前看到一些文章，希望能有一個(gè):parents() 這樣的選擇器，雖然直到目前為止還沒有 :parents() 選擇器，但慶幸的是，:has() 選擇器即將到來，它可以用來選擇父級元素。
在支持:has()的瀏覽器中，你將看到下圖這樣的效果：
07 :focus-visible 和 :focus-within
大家伙對于:focus應(yīng)該不會感到陌生，早期對于可聚焦元素可以使用?:focus?來給元素設(shè)置焦點(diǎn)狀態(tài)下的 UI 風(fēng)格，即焦點(diǎn)環(huán)樣式：
雖然?:focus 、:focus-within 和 :focus-visible?都可以用來設(shè)置焦點(diǎn)環(huán)的樣式，但他們之間還是有一定的差異：
:focus ：當(dāng)用戶使用鼠標(biāo)點(diǎn)擊焦點(diǎn)元素或使用鍵盤的 Tab 鍵（或快捷鍵）觸發(fā)焦點(diǎn)元素焦點(diǎn)環(huán)的樣式。
:focus-visible：只有使用鍵盤的 Tab 鍵（或快捷鍵）觸發(fā)焦點(diǎn)元素焦點(diǎn)環(huán)的樣式。如果僅使用 :focus-visible 設(shè)置焦點(diǎn)環(huán)樣式的話，那么用戶使用鼠標(biāo)點(diǎn)擊焦點(diǎn)元素時(shí)不會觸發(fā)焦點(diǎn)環(huán)樣式。
:focus-within：表示一個(gè)元素獲得焦點(diǎn)，或該元素的后代元素獲得焦點(diǎn)。這也意味著，它或它的后代獲得焦點(diǎn)，都可以觸發(fā)?:focus-within。
你會發(fā)現(xiàn)，分別使用鼠標(biāo)點(diǎn)擊按鈕和按Tab 讓按鈕獲得焦點(diǎn)時(shí)焦點(diǎn)環(huán)樣式效果不同：
不過需要注意的是，:focus?和?:focus-visible?也會涉及到選擇器權(quán)重的問題，就上面的示例來說，如果我們把?:focus?選擇器對應(yīng)的樣式放置到?:focus-visible之后：
這個(gè)時(shí)候，你會發(fā)現(xiàn)不管用戶使用鍵盤?Tab?鍵還是鼠標(biāo)讓?<button>?獲得焦點(diǎn)時(shí)，焦點(diǎn)樣式都會采用:focus對應(yīng)的樣式：
對于:focus-within而言，它其實(shí)有點(diǎn)類似于?:has()偽類選擇器，可以在子元素得到焦點(diǎn)時(shí)，觸發(fā)父元素
更簡單的說，它有點(diǎn)類似于?JavaScript?的事件冒泡，從可獲得焦點(diǎn)元素開始一直冒泡到HTML的根元素?<html>?，都可以接收觸發(fā)?:focus-within事件。
示列：
當(dāng)button按鈕獲取焦點(diǎn)時(shí)候得到一下效果：
08 ::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track
PC端網(wǎng)頁基本都存在滾動條，但是很多場景下，其實(shí)用戶已經(jīng)很少需要用鼠標(biāo)去特意選中或者下拉滾動條，但多數(shù)只是給用戶以提醒頁面還有很長的作用，所以默認(rèn)的滾動條，太明顯且樣式不符合網(wǎng)站的要求，很多情況需要弱化滾動條的寬度和顏色，盡可能低減少滾動條對網(wǎng)頁效果的侵入。
在自定義滾動條之前，我們先了解滾動條的組成，我們具體要去設(shè)置滾動條那些部位，大部分我們只需要設(shè)置滾動條的兩個(gè)部位-滾動條軌道和滾動拇指。
不管是滾動軌道還是滾動拇指基本都設(shè)設(shè)置寬度和對應(yīng)的顏色，那具體使用什么來設(shè)置了，那就了解一下幾個(gè)偽元素選擇：
::-webkit-scrollbar：用于定義整個(gè)滾動條的樣式，包括寬度和背景顏色；
::-webkit-scrollbar-track：用于定義滾動條軌道的樣式，包括軌道的顏色等；
::-webkit-scrollbar-thumb：用于定義滑塊的樣式，包括滑塊的背景顏色和圓角等。
實(shí)現(xiàn)具體代碼如下：
效果如下：
好了先到聊到這里啦，希望這篇文章能給大家一些幫助吧，看似css是開發(fā)中最簡單的知識點(diǎn)，確實(shí)也是最簡單的，但往往最簡單的也是最容易被忽略的，其實(shí)css也是能實(shí)現(xiàn)一些意想不到卻很強(qiáng)大的功能。
