CSS的:focus-within伪类选择器怎么用

本篇内容主要讲解“CSS的:focus-within伪类选择器怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS的:focus-within伪类选择器怎么用”吧!

专注于为中小企业提供成都网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业潢川免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

一、了解CSS :focus-within伪类选择器

CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲，区别在于:focus表示当前元素处于focus状态时候干嘛干嘛，而:focus-within表示当前元素或者当前元素的子元素处于focus状态时候干嘛干嘛。

举个例子：

form:focus {
  outline: solid;
}

表示仅仅当

处于focus状态时候，元素outline出现。

form:focus-within {
  outline: solid;
}

表示元素自身，或者内部的子元素处于focus状态时候，元素outline出现。换句话说，子元素focus，可以让任意父级元素样式发生变化。

这个新特性的支持，未来势必会带来更加丰富的交互形式，以及特定场景简化我们实现。

兼容性

兼容性如下截图：

CSS的:focus-within伪类选择器怎么用

还是挺喜人的。

二、CSS :focus-within伪类选择器实际应用举例

1. 表单输入勿扰模式

当我们表单输入，选择或者进行交互时候，页面上表单以为其他内容全部都不可见。

CSS代码如下：

form {
    outline: 2000px solid hsla(0,0%,100%,0);
    transition: outline .2s;
    position: relative;
    z-index: 1;
}
form:focus-within {
    outline: 2000px solid hsla(0,0%,100%,1);
}

效果如下截屏gif：

CSS的:focus-within伪类选择器怎么用

大屏浏览器体验更有感觉，您可以狠狠的点击这里：:focus-within伪类选择器与表单输入勿扰模式demo

本案例是真实的勿扰模式效果可以放心大胆在实际项目中使用，因为这是一个体验增强的交互，就算浏览器不支持，对原本功能也不会有任何影响。

2. 带计数文本域的focus高亮

对于带计数的组件化的多行文本域，计数的数值通常是设计在文本域的右下角，这样能够适应各种复杂的场景。如下截图：

然而这种设计对我们的布局实现带来的挑战。

我们通常想到的方法是，计数元素浮在下面的textarea元素上。然而这种时间存在有致命的不足，那就是输入框的内容有可能和我们的计数重叠，以及出现的滚动条和技术文本重叠，如下截图所示：

CSS的:focus-within伪类选择器怎么用

您可以狠狠地点击这里：带计数文本域自身:focus高亮重叠问题demo

因此，我们通常做法就是：边框使用父级

元素模拟，文本域元素和技术元素上下依次排列（非重叠），文本域原本的边框去除。

假设HTML如下：


    
    0/250

则核心CSS这样：

/* 父级div元素模拟边框 */.textarea-x {
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
}/* 文本域原本的边框去除 */.textarea-x > textarea {
    border: 0;
    background: none;
}

然而上面的实现有个非常严重的不足，那就是</code>元素<code>:focus</code>时候，边框无法高亮，因为CSS中没有父选择器！</p><p>因此，实际开发的时候，我们会使用相邻兄弟选择器，以及新建一个兄弟元素来模拟边框。</p><p>HTML结构如下：</p> <pre><div class="textarea-x"> <textarea>


    0/250


原理如下图示意：
 
对应的核心CSS代码如下：
.textarea-x {
    position: relative;
    z-index: 0;
}
.textarea-x > textarea {
    border: 0;
    background: none;
    outline: 0;
    resize: none;
    position: relative;
}
.textarea-x > .textarea {
    position: absolute;
    border: 1px solid #d0d0d5;
    border-radius: 4px;
    background-color: #fff;
    top: 0; bottom: 0; left: 0; right: 0;  
    z-index: -1;
}
.textarea-x > :focus + .textarea {
    border-color: #00a5e0;    
}
由于.textarea元素和原生的</code>元素是相邻兄弟关系，因此我们可以借助相邻兄弟选择器，让<code><textarea></code>元素focus时候后面用来模拟边框的<code>.textarea</code>元素高亮。也就是这么一段CSS代码：</p>
<pre>.textarea-x > :focus + .textarea {
    border-color: #00a5e0;    
}</pre>
<p>这种实现兼容IE7+浏览器。下图为实现后的效果截图：</p><p><img src="/upload/otherpic47/75179(1).jpg" data-ke-src="/upload/otherpic47/75179(1).jpg" alt="CSS的:focus-within伪类选择器怎么用"> </p><p>当然涉及到具体代码，还是有很多细节需要注意的，您可以狠狠地点击这里：利用相邻兄弟选择器模拟带计数文本域:focus效果demo</p><hr><p>但是，现在有了CSS <code>:focus-within</code>伪类选择器，我们的事情就简单多了。</p><p>还是开始提到的父级<code><div></code>元素模拟的做法，然后，配合这么一句CSS就可以了：</p>
<pre>.textarea-x:focus-within {
    border-color: #00a5e0;    
}</pre>
<p>就是这么简单。</p><p>您可以狠狠地点击这里：:focus-within伪类与带计数文本域高亮demo</p><p>focus时候效果如下截图：</p><p><img src="/upload/otherpic47/75181(1).jpg" data-ke-src="/upload/otherpic47/75181(1).jpg" alt="CSS的:focus-within伪类选择器怎么用"> </p><h4>三、:focus-within更多思路、更棒案例和结束语</h4><p><code>:focus-within</code>伪类原本设计的作用是原生表单元素<code>focus</code>时候，祖先<code><form></code>元素可以也有状态变化。</p><p>但是在我看来，<code>:focus-within</code>功能之强悍，远远不是仅仅和祖先<code><form></code>元素玩过家家这么简单。</p><p>理论上，只要页面上任意一个元素<code>focus</code>，通过<code>:focus-within</code>就能对页面上任意的元素进行样式控制。</p><p>例如：</p>
<pre>html:focus-within xxx {    /*xxx跑得了吗？跑不了*/}</pre>
<p>我想到的有：</p><ol><li><p>相邻选择器，加号，或者弯弯都只能选择后面的元素，但是，有了<code>:focus-within</code>，我们就可以对前面元素进行控制，虽然只能在<code>:focus</code>行为场景下。例如请重复输入密码时候，让上面的输入密码框也高亮。</p></li><li><p>基于纯CSS和focus行为实现下拉列表的交互成为了可能。只要把按钮和下拉元素放在一个容器中，就可以了。</p><p>您可以狠狠地点击这里：:focus-within伪类与纯CSS下拉列表demo</p><p>点击“我的消息”，就会出现下拉列表；此时点击下拉列表里面的条目，下拉元素也一直显示（因为列表是可focus的<code><a></code>元素）。只有点击页面空白元素或其他位置，下拉列表才会隐藏。完全符合实际项目开发的下拉列表交互需求。</p><p>交互效果如下GIF截屏所示：</p><p><img src="/upload/otherpic47/75182.jpg" data-ke-src="/upload/otherpic47/75182.jpg" alt="CSS的:focus-within伪类选择器怎么用"> </p><p>核心代码如下：</p>
<pre><div class="details">
    <a href="javascript:" class="summary">我的消息</a> 
    <div class="box">
        <a href="javascript:">我的回答<sup>12</sup></a>
        <a href="javascript:">我的私信</a>
        <a href="javascript:">未评价订单<sup>2</sup></a>
        <a href="javascript:">我的关注</a>
    </div>
</div></pre>
<pre>.box {
    display: none;
}
.details:focus-within .summary {
    background-color: #fff;
}
.details:focus-within .box {
    display: block;
}</pre>
</li></ol><p>到此，相信大家对“CSS的:focus-within伪类选择器怎么用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！</p>            
            
                        <br>
            标题名称：CSS的:focus-within伪类选择器怎么用            <br>
            当前地址：<a href="http://www.whjierui.cn/article/ihhdod.html">http://www.whjierui.cn/article/ihhdod.html</a>
        </div>
    </div>
    <div class="other">
        <h3>其他资讯</h3>
        <ul>
            <li>
                    <a href="/article/jodepp.html">怎么在PHP项目中使用Swoole</a>
                </li><li>
                    <a href="/article/jodehd.html">C++中CStringstringchar*char之间字符转换的示例分析</a>
                </li><li>
                    <a href="/article/jodeph.html">（FAT32）文件误删除了，而且也清空了回收站，怎么办</a>
                </li><li>
                    <a href="/article/jodepi.html">php怎么修改数组中的键值</a>
                </li><li>
                    <a href="/article/jodehi.html">保证Linux系统安全之分析和排查系统故障</a>
                </li>        </ul>
    </div>
</div>
<footer>
    <div class="foot-top">
        <ul>
            <li>
                <div class="title">关于美图云海</div>
                <div class="tbox">
                    <div class="txt">
                        美图云海专注于网站建设、小程序开发，
                        <br /> 用心做好每一个网站，懂您所需、做您所想！
                        <br /> 我们比其他网络公司做的更好、做的更多，
                        <br /> 为客户创造更大的价值，让客户更省心!
                    </div>
                    <a rel="nofollow" href="javascript:;" class="more">MORE</a>
                </div>
            </li>
            <li>
                <div class="title">相关专题</div>
                <div class="tbox">
                    <a href="javascript:;" class="link">企业官网定制</a>
                    <a href="javascript:;" class="link">小程序开发</a>
                    <a href="javascript:;" class="link">品牌网站设计</a>
                    <a href="javascript:;" class="link">网站建设标签</a>
                    <a href="javascript:;" class="link">乐山网站建设</a>
                    <a href="javascript:;" class="link">高端网站设计</a>
                    <a href="javascript:;" class="link">公司做网站</a>
                </div>
            </li>
            <li>
                <div class="title">凭什么选择我们</div>
                <div class="tbox">
                    <a class="link">专业设计团队</a>
                    <a class="link">快速响应服务</a>
                    <a class="link">7个软件著作权</a>
                    <a class="link">已服务3000+客户</a>
                    <a class="link">项目检测具体全面</a>
                    <a class="link">技术研发能力强劲</a>
                    <a class="link">深度符合SEO优化</a>
                    <a class="link">15项设计奖项</a>
                    <a class="link">完善的制作流程</a>
                    <a class="link">售后服务让您省心</a>
                </div>
            </li>
            <li>
                <div class="title">网站设计案例</div>
                <div class="tbox">
                    <ul>
                        <li>
                            <a href="javascript:;" target="_blank">
                                <div class="img"><img src="/Public/Home/images/gebaili.jpg" alt="哥百利" />
                                </div>
                                <div class="tboxs">
                                    <div class="t1">哥百利</div>
                                    <div class="t2">家具研发、设计、生产、服务为一体的专业实木家具订做企业</div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" target="_blank">
                                <div class="img"><img src="/Public/Home/images/cdshujin.jpg" alt="蜀锦在线" /></div>
                                <div class="tboxs">
                                    <div class="t1">蜀锦在线</div>
                                    <div class="t2">汽车行业网站建设</div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div class="foot-center">
        <ul>
            <li>
                <div class="f-ewm"><img alt="美图云海微信公众号" src="/Public/Home/images/ewm.jpg" /></div>
                <div class="tbox ewm">
                    <div class="t1">扫一扫关注</div>
                    <div class="t2">专业团队为您解答</div>
                </div>
            </li>
            <li>
                <div class="tbox tel">
                    <div class="t1">电话/邮箱</div>
                    <div class="t2">400-028-6601 / 028-86922220<br>631063699@qq.com</div>
                </div>
            </li>
            <li>
                <div class="tbox sz">
                    <div class="t1">成都（总部）</div>
                    <div class="t2">成华区 双林路22号仁禾商务楼5F<br> 大客户专线：13518219792
                    </div>
                </div>
            </li>
            <li>
                <div class="tbox gz">
                    <div class="t1">网站建设（乐山站）</div>
                    <div class="t2">
                        乐山市市中区瑞祥路一段1507号
                        <br /> 028-86922220
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="foot-button">
        <div class="link-box" style="width:100%;float:none;">
            <div class="a-box"></div>
            <div style="border-top:1px solid #ebebeb;font-size:12px;color:#666666;line-height:2;padding-top:20px;margin-top:20px;">
                业务范围包括企业网站建设、商城系统开发、品牌网站设计、旅游网站制作、英文外贸网站、教育培训门户网站开发、微信手机移动端开发、响应式网站建设、微信小程序开发、APP定制和其他类型网站定制等。
                <br>服务区域包括成都市锦江区、青羊区、武侯区、金牛区、成华区、龙泉驿、温江、新都、高新区、成都市以及全国各地接受异地服务商的公司企业或者机构。
                <br>
                <div class="a-box"><span><b>友情链接</b></span>
                    <a href="http://www.bgwzsj.com" title="班戈网站建设公司" target="_blank">班戈网站建设公司</a><a href="http://chengdu.cdcxhl.cn/dingzhi/
" title="成都定制网站" target="_blank">成都定制网站</a><a href="http://www.cdhuace.com/fuwu.html" title="名片" target="_blank">名片</a><a href="https://www.cdxwcx.com/wangzhan/gaiban.html" title="成都网站改版" target="_blank">成都网站改版</a><a href="http://www.cdweb.net/" title="自适应网站建设" target="_blank">自适应网站建设</a><a href="http://www.4006tel.net/" title="app网站建设" target="_blank">app网站建设</a><a href="http://www.guwujiaju.cn/" title="成都标识标牌" target="_blank">成都标识标牌</a><a href="http://m.cdxwcx.com/" title="成都网站建设" target="_blank">成都网站建设</a><a href="https://www.cdxwcx.com/jifang/xiyun.html" title="西云机房" target="_blank">西云机房</a><a href="http://m.cdcxhl.cn/wechat/
" title="微信公众号开发" target="_blank">微信公众号开发</a>                </div>
            </div>
            <div class="copyright">©2025 青羊区美图云海设计工作室（个体工商户）乐山站   蜀ICP备19037934号</div>
        </div>
    </div>
</footer>
<div class="fixed-contact-wrap show">
    <ul class="item-list clearfix">
        <li class="phone">
            <a rel="nofollow" target="_blank" href="tel:028-86922220"><i
                    class="icon"></i><strong>028-86922220</strong></a>
        </li>
        <li class="qq">
            <a rel="nofollow" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><i
                    class="icon"></i><strong> 244261566</strong></a>
        </li>
        <li class="back-top">
            <a href="#" rel="nofollow" class="back-to-top"><i class="icon"></i><strong> 回到顶部</strong></a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    //右侧联系我们悬浮窗
    $(".fixed-contact-wrap").hover(function () {
        $(this).addClass("active");
    }, function () {
        $(this).removeClass("active");
    })
    function show_phone_menu() {
        $(".right-side ul").toggle();
    }
</script>

</body>
</html>

<script>
    $(".con img").each(function(){
        var src = $(this).attr("src");    //获取图片地址
        var str=new RegExp("http");
        var result=str.test(src);
        if(result==false){
            var url = "https://www.cdcxhl.com"+src;    //绝对路径
            $(this).attr("src",url);
        }
    });
    window.onload=function(){
        document.oncontextmenu=function(){
            return false;
        }
    }
</script>

网站建设资讯

CSS的:focus-within伪类选择器怎么用

一、了解CSS :focus-within伪类选择器

兼容性

二、CSS :focus-within伪类选择器实际应用举例

1. 表单输入勿扰模式

2. 带计数文本域的focus高亮