强大而好用的选择器:focus-within

强大而好用的选择器:focus-within

伪类和伪元素

在开发网页样式中，选择器必不可少，而且选择器也是在开发css中非常重要的内容，包括常用的类选择器，id选择，同时还有伪类，伪类选择器最大的特点就是冒号开头。平时也经常会有小伙伴问到，在使用的时候有伪类，也有伪元素，有些添加单冒号，有些添加双冒号，有没有什么区别？

在网上总结的比较多的一个特点就是，其实在使用的时候，无论是伪类还是伪元素都是可以用单冒号的。但是伪元素可以用双冒号，而伪类只能用单冒号。符合标准而言，单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。

:focus-within伪类

上面简单讲解一下伪元素选择器和伪类选择器，本文的主角是一个新的伪类选择器：:focus-within。

:focus-within选择器其实跟:focus是很相似的，但是也有很大的区别，:focus设置之后，是当前元素触发焦点状态后的样式。而:focus-within，通过名字可以猜到，它是当前元素或者后的元素获取焦点后的样式。

举个栗子：

<style>
    form{
        width: 500px;
        min-height: 300px;
        padding: 10px;
    }
    /* 第一种情况 */
    input:focus{
        outline: solid red;
    }
    /* 第二种情况 */
    form:focus-within{
        outline: solid red;
    }
</style>

<form action="">
    <input type="text" id="txt">
</form>

:focus :focus-within

第一种情况是input元素获取焦点的时候触发，让input自身设置outline的样式；第二种情况，当input获取焦点后，form设置outline的样式。

通过这一点我们可以制造出一些常用的交互样式，简化JavaScript的代码。

兼容性

虽然是新选择器，但是兼容性还是挺友好的。

:focus-within的兼容性

:focus-within 的冒泡性

这个属性有点类似 Javascript 的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发 :focus-within 事件，在上面的示例中就是如此。

那么它可以有哪些实际应用呢？

感知用户聚焦位置

跟上面示例一样，当用户触发之后，向父级进行传递，我们可以指定用户的聚焦位置，利用这一点，可以设置增加用户体验的交互效果。

举个栗子：

<style>
    *{
        padding: 0;
        margin: 0;
        border: none;
    }
    form{
        width: 200px;
        min-height: 300px;
        padding: 10px;
        border: 1px solid rgba(204,204,204,1);
        margin: 100px auto;
        transition: 0.2s;
    }
    .username,.password{
        height: 80px;
        margin: 50px 0 ;
    }
    input{
        box-sizing: border-box;
        outline: none;
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(204,204,204,1);
        transition: 0.2s;
    }
    input:focus{
        border: 1px solid rgba(55,55,210,1);
    }
    form:focus-within{
        border: 1px solid rgba(55,55,210,1);
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        transform: translateY(-4px);
    }
</style>

<form action="">
    <div class="username">
        <input type="text" placeholder="Your name" id="usr">
    </div>
    <div class="password">
        <input type="password" placeholder="Your password" id="pwd">
    </div>
</form>

效果如下图所示：

感知聚焦区域

运用上面思想，我们可以把效果做的更炫一点点，在某些场景制作一些增强用户体验的效果。

:focus-within炫酷效果

也可以实现掘金网登录动效切换，掘金网的登录有一个小彩蛋，最上面的熊猫在你输入帐号密码的时候会有不同的状态。

登录框交互效果

以上两个效果，大家可以自行尝试进行书写。

本文主要是引出这一个伪元素，大家可以发挥自己的创意，开发出更炫酷的效果。