登录
Go教程
Go问答
MySQL
Redis
软件教程
人工智能
业界新闻
php教程
java教程
python教程
linux
前端
常见问题
AI提示词
作文
画画
一月内
三天内
一周内
一月内
三月内
最新
最热
文章
·
前端
| 3星期前 |
CSS not()排除指定元素，灵活控制其他元素
:not()仅作用于当前选择器匹配的元素本身，不递归穿透后代，其内只能写简单选择器，多:not()连用为逻辑与，且权重等同于括号内选择器。
399
收藏
文章
·
前端
| 3星期前 |
HTML显示网络中断恢复提示，如“重新连接中…”文本，通常需要结合JavaScript来检测网络状态，并在页面上动态更新内容。以下是一个简单的实现示例：✅ 示例代码：HTML + JavaScript 显示“重新连接中…”提示
网络状态提</a></div> <a href="/article/559899.html" class="img_box"><img src="/uploads/20260407/177555775769d4dc7d7dc83.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">navigator.onLine不可靠，仅反映网络栈状态而非真实连接；应结合AbortController控制的fetch心跳检测（如/api/ping）判断服务可达性，并加防抖和CSS过渡优化提示体验。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="559899"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/562763.html" class="aBlack">CSS过渡速度曲线设置详解</a></div> <a href="/article/562763.html" class="img_box"><img src="/uploads/20260410/177578001569d840afd9309.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">transition-timing-function控制网页元素过渡的快慢节奏，常见类型有1.ease（默认值，先慢后快再慢）2.linear（匀速过渡）3.ease-in（开始慢逐渐加快）4.ease-out（开始快结束前减慢）5.ease-in-out（整体平滑，开头结尾放缓），例如button{transition:background-color0.3sease-in;}可实现按钮hover时慢慢变色，自定义曲线使用cubic-bezier()并通过在线工具调整参数，如cubic-bezier(0</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="562763"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/563121.html" class="aBlack">CSS实现图片滑动动画技巧</a></div> <a href="/article/563121.html" class="img_box"><img src="/uploads/20260410/177579627169d8802fba788.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">图片左滑入场需用@keyframes定义translateX(-100%)到translateX(0)，绑定animation并加forwards，确保初始位置在视口左外侧且样式权重足够。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="563121"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/565863.html" class="aBlack">Bootstrap4.5多级下拉不关闭技巧</a></div> <a href="/article/565863.html" class="img_box"><img src="/uploads/20260412/177597616569db3ee57cdd3.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">本文详解如何在Bootstrap4.5中禁用默认的「单开互斥」行为，使多个navbar下拉菜单可同时保持展开状态，适用于侧边栏式导航等定制化场景。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="565863"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/567304.html" class="aBlack">前端日志收集与异常捕获方法</a></div> <a href="/article/567304.html" class="img_box"><img src="/uploads/20260413/177606933369dcaad580ba6.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">前端日志收集需全面捕获异常并结构化上报。首先通过window.onerror、error事件和unhandledrejection监听全局错误与Promise异常；其次针对脚本、图片等资源加载失败绑定onerror或捕获error事件；再结合自定义埋点记录用户行为，封装reportLog统一上报，附带时间、URL、设备等上下文信息；最后利用SourceMap还原压缩代码的错误堆栈，提升定位效率。整个机制应确保安全可控，避免源码泄露，实现高效问题追踪与用户体验优化。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="567304"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/568541.html" class="aBlack">对象池优化：降低GC损耗技巧分享</a></div> <a href="/article/568541.html" class="img_box"><img src="/uploads/20260414/177615351569ddf3abecce9.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">对象池在高频创建场景下可能加重GC压力，因闲置对象晋升老年代触发FullGC，且绕过TLAB和逃逸分析优化；应依生命周期、大小、逃逸分析结果审慎使用。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="568541"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/569882.html" class="aBlack">Animate.css实现li列表动画效果</a></div> <a href="/article/569882.html" class="img_box"><img src="/uploads/20260415/177624291269df50e02adb7.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">引入Animate.css后，为li添加animate__animated与具体动画类，通过JavaScript控制触发时机，可实现列表项进入视口或延迟逐项播放动画效果。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="569882"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/570225.html" class="aBlack">CSS组合选择器与Flex布局技巧</a></div> <a href="/article/570225.html" class="img_box"><img src="/uploads/20260415/177625821269df8ca47cb41.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">通过组合选择器与Flex布局结合，可精准控制子元素样式与对齐。使用.container>.item选中直接子元素，.container.header+.content选择相邻兄弟，.navli:first-child结合伪类设置首项样式；Flex容器通过justify-content和align-items控制主轴与交叉轴对齐，子项用align-self单独调整，flex-grow与flex-shrink管理空间分配；实战中导航栏两端对齐用space-between，中间菜单居中通过margin:0</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="570225"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/570750.html" class="aBlack">HTML网页制作步骤与工具全解析</a></div> <a href="/article/570750.html" class="img_box"><img src="/uploads/20260416/177631041569e0588f8e15c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">HTML网页制作应从明确内容目标和语义结构开始，确保DOCTYPE声明、UTF-8编码、title标签正确使用，优先采用article、time、h2等语义化标签，通过HTTP服务本地预览，并用W3C验证工具检查合法性。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="570750"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/571624.html" class="aBlack">CSS边框设置与样式技巧</a></div> <a href="/article/571624.html" class="img_box"><img src="/uploads/20260416/177634972269e0f21a87903.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">边框设置需协同border-style、border-width、border-color三者，单独设color不声明style会导致边框消失；虚线等效果依赖style取值及width配合；border-radius过大易致边框断裂；表格collapse需table与单元格均设border才生效。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="571624"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/575982.html" class="aBlack">CSS列表项渐现效果技巧</a></div> <a href="/article/575982.html" class="img_box"><img src="/uploads/20260423/177695627069ea336ebfd48.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">animation-delay需按索引递增设置才有效：纯CSS用:nth-child(n)手动设定，动态列表须用JS遍历设style.animationDelay；务必声明初始状态并配animation-fill-mode:forwards。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="575982"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 3天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/579899.html" class="aBlack">HTML5空格输入方法详解</a></div> <a href="/article/579899.html" class="img_box"><img src="/uploads/20260427/177725535769eec3bd3b110.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">HTML中连续空白符被压缩为单个空格是规范行为；用 实现不换行空格；CSS的white-space属性可灵活控制空白处理；JavaScript中需用innerHTML或Unicode160值避免压缩。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="579899"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/579987.html" class="aBlack">float塌陷怎么解决？min-height清除浮动技巧</a></div> <a href="/article/579987.html" class="img_box"><img src="/uploads/20260427/177726215569eede4ba8c7c.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">min-height不能修复float导致的父元素塌陷，它仅设高度下限却不触发BFC或清除浮动，无法让父容器感知浮动子元素，背景、边框及后续布局仍会错乱。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="579987"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | </div> <div class="tit lineTwoOverflow"><a href="/article/580076.html" class="aBlack">Flexbox子容器撑满父容器高度技巧</a></div> <a href="/article/580076.html" class="img_box"><img src="/uploads/20260427/177726781269eef464d3c05.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">本文详解在Flexbox布局中，如何确保嵌套的.parent和.item元素正确继承并占满.root的最小高度（如min-height:350px），重点解决因display层级缺失导致flex-grow失效的问题。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>399</span> <span class="collectBtn user_collection" data-type="article" data-id="580076"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> </ul> <div class="mngfPage"><a href="/articlelist/88_hot_30_101.html" class="prevPage on"></a> <a href="/articlelist/88_hot_30_1.html">1</a><a href="/articlelist/88_hot_30_101.html">101</a><a class="currentPage">102</a><a href="/articlelist/88_hot_30_103.html">103</a><a href="/articlelist/88_hot_30_403.html">403</a> <a href="/articlelist/88_hot_30_103.html" class="nextPage on"></a></div> </div> </div> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> let flaga = 1; var category_id = 88; let strbiaoqian = ''; let zhankaihtml = ''; // let zhankaihtml = '<div class="zhankaiflag biaoqianone " style="display: inline-block;" onclick="zhankaiflagclick(this);">展开<i></i></div>'; let shouqihtml = ''; // let shouqihtml = '<div class="zhankaiflag biaoqianone zhankai" style="display: inline-block;" onclick="zhankaiflagclick(this);">收起<i></i></div>'; let allhtml = ''; let fumo = ''; $(".userInfo1 .biaoqianone").each(function(){ var href = $(this).attr('href'); var cat_id = $(this).data('id'); let cuc = '<a href="'+href+'" class="biaoqianone" style="display: inline-block;">'; if(category_id!==0&&category_id==cat_id){ cuc ='<a href="javascript:;" class="biaoqianone hover" style="display: inline-block;">'; } fumo = cuc; allhtml+=fumo+$(this).html()+'</a>'; strbiaoqian+=fumo+$(this).html()+'</a>'; // if(flaga<=8){ // } flaga++; }); strbiaoqian+=zhankaihtml; allhtml+=shouqihtml; $(".userInfo1").html(strbiaoqian); // function zhankaiflagclick(obj){ // if($(obj).html()=='展开<i></i>'){ // $(obj).html('收起<i></i>'); // $(obj).addClass('zhankai'); // $(".userInfo1").html(allhtml); // }else{ // $(obj).html("展开<i></i>"); // $(obj).removeClass('zhankai'); // $(".userInfo1").html(strbiaoqian); // } // } $('.timeLimitBox').click(function(){ $(this).toggleClass('hover') }) </script> </body> </html>
:not()仅作用于当前选择器匹配的元素本身，不递归穿透后代，其内只能写简单选择器，多:not()连用为逻辑与，且权重等同于括号内选择器。399 收藏