CSS中focus-within怎么用

這篇文章主要介紹CSS中focus-within怎么用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都網(wǎng)站建設(shè)公司更懂你！成都創(chuàng)新互聯(lián)只做搜索引擎喜歡的網(wǎng)站！成都網(wǎng)站制作前臺采用搜索引擎認(rèn)可的DIV+CSS架構(gòu),全站HTML靜態(tài),HTML5建站+CSS3網(wǎng)站,提供：網(wǎng)站建設(shè)，微信開發(fā)，微信平臺小程序開發(fā)，商城開發(fā)，成都app軟件開發(fā)，空間域名，服務(wù)器租售，網(wǎng)站代托管運(yùn)營，微信公眾號代托管運(yùn)營。

CSS的世界真是一個神奇的世界。可能眾多前端開發(fā)者聽說過 :focus 并未聽說過 :focus-within 。那么 :focus-within 是什么鬼。

:focus-within是什么

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

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

<div class="form-group">
    <label for="email">
        Your email:
    </label>
    <input type="email" name="email" id="email" placeholder="Enter your email address"/>
</div>

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

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

:focus-within的使用場景

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

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

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

表格行的高亮

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

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

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

這個時候你只需要在樣式中添加：

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

下拉菜單

下拉菜單是我們最常的Web組件之一。當(dāng)我第一次看到 :focus-within 這個偽類時，我想到的第一個使用場景就是下拉菜單。

上面的示例中，JavaScript是用來跟蹤用戶鍵盤焦點在一個導(dǎo)航下拉菜單中的。如果JavaScript檢測到鍵盤焦點在一個鏈接上，那么給 .nav__list_drop 添加一個 .has-focus 類。當(dāng) li 有了 .has-focus 類時，他的子元素就會顯示出來，也就是下拉菜單會顯示出來。

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

.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是在移動端上常見的一個效果。那么這個效果我們也可以通過 :focus-within 來實現(xiàn)。詳細(xì)代碼可以看下面這個示例：

瀏覽器兼容性

:focus-within 雖然很有意思，但很多同學(xué)擔(dān)心它的兼容性。通過Caniuse，我們可以看到瀏覽器對其支持度情況：

以上是“CSS中focus-within怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：CSS中focus-within怎么用
文章來源：http://muchs.cn/article26/pisojg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、用戶體驗、網(wǎng)站導(dǎo)航、虛擬主機(jī)、面包屑導(dǎo)航、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容