CSS的世界真是一個神奇的世界?？赡鼙姸嗲岸碎_發者聽說過 :focus 并未聽說過 :focus-within 。那么 :focus-within 是什么鬼。這篇文章，我們就說說 :focus-within 這個東東。

:focus-within是什么

在CSS中 :focus-within 是一個偽類，現在已經被列入到CSS選擇器中（CSS Level 4 selector）。他就像你知道的 :focus 或者 :hover 。 :focus-within 能非常方便處理獲取焦點狀態。當元素本身或其后代元素獲得焦點時， :focus-within 偽類的元素就會有效。

如果文字不好理解，咱們先來看一個簡單的示例：

上面是一個簡單的表單，有一個 input 表單控件。

上面的示例中， .form-group 得到焦點的時候， border-color 顏色換成了 #000 。但這不意味著接收鍵盤的焦點，那是因為 <div> 不一定能得到鍵盤的焦點，沒有設置 tabindex ?；蛘哒f div 中的鏈接或 input 元素接收焦點，那么 .form-group 元素將改變邊框顏色。

看到上面的示例，是不是覺得好神奇。在以前要實現類似的效果，我們需要借助JavaScript的腳本。通過 .form-group 的后代元素的鼠標或鍵盤事件，然后給其父元素（或祖先元素，添加對應的樣式）。

:focus-within的使用場景

:focus-within 非常強大，主要是由于偽類在它的任何元素獲取到焦點時都將被激活。當元素包含許多子組件的元素上謹慎使用該偽類。

有了 :focus-within 之后，有一些常見的交互行為就變得非常的簡單，特別是以前需要JavaScript的鍵盤事件的交互行為，我們都可以使用 :focus-within 來替代。

接下來，咱們來看一些 :focus-within 的常見示例。

表格行的高亮

一個常見的例子，就是表格行高亮的行為，即鼠標懸浮在表格的行時，顏色變得高亮。這樣的交互樣式可以幫助有視力阻礙的用戶能更好的閱讀一個復雜的表格或長表格。因為突出的顯示，可以使用這些用戶更容易地跟蹤他們當前正在閱讀的表格行。以前常常實現的方式是通過 :hover 來改變表格行的樣式，這種方案對于正常的用戶而言是一件易事，但如果你的用戶對于一些操作鼠標有阻礙的用戶而言，那 :hover 就有點蛋疼了。如果你是追求完美的話，你可能會通過JavaScript的鍵盤事件給表格行添加樣式。

那么有了 :focus-within 之后，我們就可以和JavaScript說拜拜。我們可以這樣來設置樣式：