css中:focus-within是什麼

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

沒看懂，可以看下面的例子：

<div class="container" tabindex="0"> 
  <label for="text">Enter text</label> 
  <input id="text" type="text" /> 
</div>

<style>
.container:focus-within { 
  background-color: #aaa; 
}
</style>

如果div.container獲取到焦點時，就會有一個#aaa背景色。而且如果其後代元素獲得焦點時，其背景色也會更改，所以<input>收到焦點時，div的背景色仍是#aaa。 這樣，我們就不需要實現這樣功能時，總是使用JavaScript，極大方便開發者。

:focus-within的使用場景

:focus-within 非常強大，主要是由於偽類在它的任何元素獲取到焦點時都將被啟用。當元素包含許多子元件的元素上謹慎使用該偽類。有了 :focus-within 之後，有一些常見的互動行為就變得非常的簡單，特別是以前需要JavaScript的鍵盤事件的互動行為，我們都可以使用 :focus-within 來替代。接下來，咱們來看一些 :focus-within 的常見示例。

1、表格行的高亮

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

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

上面的示例展示瞭如何使用 :focus-within 來突出表格的整個行。如果在特定的表格行中有一個可獲取焦點的可用元素，這裡所指的是通過鍵盤獲取焦點。比如上面這個示例，表格中有 <a> 元素，你懂的， a 元素是可以通過鍵盤獲取焦點的。

這個時候你只需要在樣式中新增：

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}

2、下拉選單

下拉選單是我們最常的Web元件之一。當我第一次看到 :focus-within 這個偽類時，我想到的第一個使用場景就是下拉選單。下拉選單

上面的示例中，JavaScript是用來跟蹤使用者鍵盤焦點在一個導航下拉選單中的。如果JavaScript檢測到鍵盤焦點在一個連結上，那麼給 .nav__list_drop 新增一個 .has-focus 類。當 li 有了 .has-focus 類時，他的子元素就會顯示出來，也就是下拉選單會顯示出來。

這樣的效果，我們可以直接通過 :focus-within 來取代JavaScript指令碼的功能。使用 .nav__list__drop:focus-within 替代 .nav__list__drop.has-focus 。當你操作鍵盤，讓下拉選單項獲得焦點時，就會顯示下拉選單。

.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;
}

pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html

Off-screen Nav是在移動端上常見的一個效果。那麼這個效果我們也可以通過 :focus-within 來實現。

總結

如果你熟悉 :focus 並不奇怪，但是你知道 :focus-within 的話，說明你在不斷的關注css相關的新特性。當然這個屬性再次重新整理了css的世界真是奇怪。如果你感興趣的話，不仿自己寫寫Demo。你會喜歡上這個屬性的。