神奇的選擇器 :focus-within

時間 2019-11-10

標籤神奇選擇器 focus 简体版

原文原文鏈接

CSS 的僞類選擇器和僞元素選擇器，讓 CSS 有了更爲強大的功能。css

僞類你們聽的多了，僞元素可能聽到的不是那麼頻繁，其實 CSS 對這兩個是有區分的。html

有個錯誤有必要每次講到僞類都提一下，有時你會發現僞類元素使用了兩個冒號 (::) 而不是一個冒號 (:)，這是 CSS3 規範中的一部分要求，目的是爲了區分僞類和僞元素，大多數瀏覽器都支持下面這兩種表示方式。git

一般而言，github

#id:after{
 ...
}

#id::after{
...
}

符合標準而言，單冒號(:)用於 CSS3 僞類，雙冒號(::)用於 CSS3 僞元素。web

固然，也有例外，對於 CSS2 中已經有的僞元素，例如 :before，單冒號和雙冒號的寫法 ::before 做用是同樣的。瀏覽器

因此，若是你的網站只須要兼容 webkit、firefox、opera 等瀏覽器或者是移動端頁面，建議對於僞元素採用雙冒號的寫法，若是不得不兼容低版本 IE 瀏覽器，仍是用 CSS2 的單冒號寫法比較安全。安全

僞類選擇器 `:focus-within`

言歸正傳，今天要說的就是:focus-within 僞類選擇器。網站

它表示一個元素得到焦點，或，該元素的後代元素得到焦點。劃重點，它或它的後代得到焦點。spa

這也就意味着，它或它的後代得到焦點，均可以觸發 :focus-within。firefox

`:focus-within` 的冒泡性

這個屬性有點相似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，均可以接收觸發 :focus-within 事件，相似下面這個簡單的例子這樣：

<div class="g-father">
    <div class="g-children">
        <input type="button" value="Button">
    </div>
</div>

html,
body,
.g-father,
.g-children {
    padding: 30px;
    border:1px solid #999;
}

input {
    ...
    &:focus {
        background: #00bcd4;
    }
}

html:focus-within {
    background: #e91e63;
}
body:focus-within {
    background: #ff5722;
}
.g-father:focus-within {
    background: #ffeb3b;
}
.g-children:focus-within {
    background: #4caf50;
}

就是這樣：

CodePen Demo -- :focus-within 冒泡觸發

這個選擇器的存在，讓 CSS 有了進一步的讓元素持久停留在一種新狀態的的能力。

下面幾個例子，看看 :focus-within 能夠提供什麼能力，作些什麼事情。

感應用戶聚焦區域

它或它的後代得到焦點，這一點使得讓感知獲焦區域變得更大，因此，最常規的用法就是使用 :focus-within 感應用戶操做聚焦區域，高亮提醒。

下面的效果沒有任何 JS 代碼：

這裏是什麼意思呢？:focus-within 作了什麼呢？

咱們無須去給獲焦的元素設置 :focus 僞類，而是能夠給須要的父元素設置，這樣當元素獲焦時，我能夠一併控制它的父元素的樣式

核心思想用 CSS 代碼表達出來大概是這樣：

<div class="g-container">
    <div class="g-username">
        <input type="text" placeholder="user name" class="g_input" >
    </div>
    <div class="g-username">
        <input type="text" placeholder="code" class="g_input" >
    </div>
</div>

.g-container:focus-within {
    ...

    input {
        ....
    }
}

DEMO -- CSS focus-within INPUT

運用上面思想，咱們能夠把效果作的更炫一點點，在某些場景製做一些加強用戶體驗的效果：

DEMO -- PURE CSS FOCUS By :focus-within

TAB導航切換

在以前的一篇文章裏，介紹了兩種純 CSS 實現的 TAB 導航欄切換方法：

純CSS的導航欄Tab切換方案

如今又多了一種方式，利用了 :focus-within 能夠在父節點獲取元素得到焦點的特性，實現的TAB導航切換：

DEMO -- focus-within switch tab

主要的思路就是經過獲焦態來控制其餘選擇器，以及最重要的是利用了父級的 :not(:focus-within) 來設置默認樣式：

.nav-box:not(:focus-within) {
    // 默認樣式
}

.nav-A:focus-within ~ .content-box .content-A {
    display: block;
}

.nav-B:focus-within ~ .content-box .content-B {
    display: block;
}

配合 `:placeholder-shown` 僞類實現表單效果

:focus-within 一我的能力有限，一般也會配合其餘僞類實現一些不錯的效果。這裏要再簡單介紹的是另一個有意思的僞類 :placeholder-shown。

:placeholder-shown：The :placeholder-shown CSS pseudo-class represents any or <textarea> element that is currently displaying placeholder text.

另外，劃重點，這個僞類是仍處於實驗室的方案。也就是未歸入標準，固然咱們的目的是探尋有意思的 CSS 。

意思大概就是，當 input 類型標籤使用了 placeholder 屬性有了默認佔位的文字，會觸發此僞類樣式。配合:not()僞類，能夠再改變當默認文字消失後的樣式，再配合本文的主角，咱們能夠實現表單的一系列效果。

CSS 代碼大概呈現成這樣：

.g-container {
    width: 500px;
    height: 60px;

    input {
        height: 100%;
        width: 100%;

        &:not(:placeholder-shown) {
            ...
        }

        &:placeholder-shown {
            ...
        }
    }

    &:focus-within {
        ...
    }
}

實際效果以下：

能夠看到，上面的效果沒有用到任何 JS，能夠實現：