CSS的世界真是一個(gè)神奇的世界?？赡鼙姸嗲岸碎_(kāi)發(fā)者聽(tīng)說(shuō)過(guò) :focus 并未聽(tīng)說(shuō)過(guò) :focus-within 。那么 :focus-within 是什么鬼。這篇文章，我們就說(shuō)說(shuō) :focus-within 這個(gè)東東。
:focus-within是什么
在CSS中 :focus-within 是一個(gè)偽類，現(xiàn)在已經(jīng)被列入到CSS選擇器中（CSS Level 4 selector）。他就像你知道的 :focus 或者 :hover 。 :focus-within 能非常方便處理獲取焦點(diǎn)狀態(tài)。當(dāng)元素本身或其后代元素獲得焦點(diǎn)時(shí)， :focus-within 偽類的元素就會(huì)有效。
如果文字不好理解，咱們先來(lái)看一個(gè)簡(jiǎn)單的示例：
<div class="form-group">
<label for="email">
Your email:
</label>
<input type="email" name="email" id="email" placeholder="Enter your email address"/>
</div>
上面是一個(gè)簡(jiǎn)單的表單，有一個(gè) input 表單控件。
.form-group *:focus {
background: yellow;
color: #000;
}
.form-group {
padding: 10px;
border: 3px solid transparent
}
.form-group:focus-within {
border-color: #000;
}
上面的示例中， .form-group 得到焦點(diǎn)的時(shí)候， border-color 顏色換成了 #000 。但這不意味著接收鍵盤(pán)的焦點(diǎn)，那是因?yàn)?<div> 不一定能得到鍵盤(pán)的焦點(diǎn)，沒(méi)有設(shè)置 tabindex ?；蛘哒f(shuō) div 中的鏈接或 input 元素接收焦點(diǎn)，那么 .form-group 元素將改變邊框顏色。
看到上面的示例，是不是覺(jué)得好神奇。在以前要實(shí)現(xiàn)類似的效果，我們需要借助JavaScript的腳本。通過(guò) .form-group 的后代元素的鼠標(biāo)或鍵盤(pán)事件，然后給其父元素（或祖先元素，添加對(duì)應(yīng)的樣式）。
:focus-within的使用場(chǎng)景
:focus-within 非常強(qiáng)大，主要是由于偽類在它的任何元素獲取到焦點(diǎn)時(shí)都將被激活。當(dāng)元素包含許多子組件的元素上謹(jǐn)慎使用該偽類。
有了 :focus-within 之后，有一些常見(jiàn)的交互行為就變得非常的簡(jiǎn)單，特別是以前需要JavaScript的鍵盤(pán)事件的交互行為，我們都可以使用 :focus-within 來(lái)替代。
接下來(lái)，咱們來(lái)看一些 :focus-within 的常見(jiàn)示例。
表格行的高亮
一個(gè)常見(jiàn)的例子，就是表格行高亮的行為，即鼠標(biāo)懸浮在表格的行時(shí)，顏色變得高亮。這樣的交互樣式可以幫助有視力阻礙的用戶能更好的閱讀一個(gè)復(fù)雜的表格或長(zhǎng)表格。因?yàn)橥怀龅娘@示，可以使用這些用戶更容易地跟蹤他們當(dāng)前正在閱讀的表格行。以前常常實(shí)現(xiàn)的方式是通過(guò) :hover 來(lái)改變表格行的樣式，這種方案對(duì)于正常的用戶而言是一件易事，但如果你的用戶對(duì)于一些操作鼠標(biāo)有阻礙的用戶而言，那 :hover 就有點(diǎn)蛋疼了。如果你是追求完美的話，你可能會(huì)通過(guò)JavaScript的鍵盤(pán)事件給表格行添加樣式。
那么有了 :focus-within 之后，我們就可以和JavaScript說(shuō)拜拜。我們可以這樣來(lái)設(shè)置樣式：
上面的示例展示了如何使用 :focus-within 來(lái)突出表格的整個(gè)行。如果在特定的表格行中有一個(gè)可獲取焦點(diǎn)的可用元素，這里所指的是通過(guò)鍵盤(pán)獲取焦點(diǎn)。比如上面這個(gè)示例，表格中有 <a> 元素，你懂的， a 元素是可以通過(guò)鍵盤(pán)獲取焦點(diǎn)的。
這個(gè)時(shí)候你只需要在樣式中添加：
tbody tr:focus-within,
tbody tr:hover {
background: rgba(lightBlue, .4);
}
下拉菜單
下拉菜單是我們最常的Web組件之一。當(dāng)我第一次看到 :focus-within 這個(gè)偽類時(shí)，我想到的第一個(gè)使用場(chǎng)景就是下拉菜單。
上面的示例中，JavaScript是用來(lái)跟蹤用戶鍵盤(pán)焦點(diǎn)在一個(gè)導(dǎo)航下拉菜單中的。如果JavaScript檢測(cè)到鍵盤(pán)焦點(diǎn)在一個(gè)鏈接上，那么給 .nav__list_drop 添加一個(gè) .has-focus 類。當(dāng) li 有了 .has-focus 類時(shí)，他的子元素就會(huì)顯示出來(lái)，也就是下拉菜單會(huì)顯示出來(lái)。
這樣的效果，我們可以直接通過(guò) :focus-within 來(lái)取代JavaScript腳本的功能。使用 .nav__list__drop:focus-within 替代 .nav__list__drop.has-focus 。當(dāng)你操作鍵盤(pán)，讓下拉菜單項(xiàng)獲得焦點(diǎn)時(shí)，就會(huì)顯示下拉菜單。
.nav__list a:focus + .nav__list__drop,
.has-drop:hover .nav__list__drop,
.nav__list__drop:focus-within {
opacity: 1;
transform: translateY(0px);
height: auto;
z-index: 1;
}
Off-screen Nav
Off-screen Nav是在移動(dòng)端上常見(jiàn)的一個(gè)效果。那么這個(gè)效果我們也可以通過(guò) :focus-within 來(lái)實(shí)現(xiàn)。詳細(xì)代碼可以看下面這個(gè)示例：
瀏覽器兼容性
:focus-within 雖然很有意思，但很多同學(xué)擔(dān)心它的兼容性。通過(guò)Caniuse，我們可以看到瀏覽器對(duì)其支持度情況：
總結(jié)