神奇的选择器 :focus-within

伪类选择器 :focus-within

言归正传，今天要说的就是:focus-within 伪类选择器。

它表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。

这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。

: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 冒泡触发(https://codepen.io/Chokcoco/pen/gjeoPg)

这个选择器的存在，让 CSS 有了进一步的让元素持久停留在一种新状态的的能力。