.cs-list{display:none;position:absolute;border:1pxsolidred;background-color:#fff;}.y-table:focus-within.cs-list{display:block;}:focus-within:not()判断显示的元素是否在[Search]按钮中在网页中，有一个场景是根据输入的关键字显示一个列表。作者曾经写过一篇文章，用JavaScript来解释场景：（JavaScript）百度/谷歌搜索的即时自动补全功能是如何“工作”的？其实我们也可以使用CSS的:not()来优化显示——判断符合条件的信息不是xxx:.list:not([class="show"]){display:none;}在CSS3选择器中,有个东西叫属性选择器,包括:[attr](有这个属性),[attr=xxx](属性值为xxx),[attr^=xxx](属性值以xxx开头),[attr$=xxx]（属性值以xxx结尾），[attr*=xxx]（属性值包含xxx）这些用法。然后在过滤的时候根据“是否满足条件”动态的给返回列表中的一些item加上showclassname。我们甚至可以配合“自定义数据属性”::不点击按钮显示菊花图说一个很常见的使用场景：在表单中，当你点击提交按钮时，如果可以让用户看到“更多的反馈效果”看来这个页面会更受欢迎。那么，当你“提交表单”时让用户知道他们正在等待似乎是一个不错的选择：通过JavaScript控制类名，在单击时将loading-name应用于按钮按钮，使其文本透明，并设置加载图片的背景！当你看到“click”的时候，我想你应该会暂时想到“伪类：focus”或者“伪类：active”，试试重写吧！:active实现“数据上报”其实网页还有一个小问题：如果用户禁用JavaScript/浏览器不支持JavaScript怎么办？当然，后一种情况现在基本不会出现，但这确实是一个棘手的问题，吸引了一大批前端开发者已经应接不暇！这个问题在笔者的其他文章中也有提到。这里只讲“数据上报”：如果没有表单，不支持JavaScript（不能用ajax），数据怎么传到后台呢？好在有一个伪类：active——点击状态！以前只针对a，现在也支持所有的html标签。但是你可能会问：这个伪类不就是用来改变链接的颜色的吗？当然，光有这个元素是不够的，不知道大家有没有想到【判断点击次数】这个经典demo！我们通常使用active和after结合：就算你不信，它确实会向服务器发送请求并上传数据！这里为什么要用url？如果不使用图片格式，只能在after-content的字符串格式中写入固定值。::after和::before的场景在伪元素/伪类中用作“实践”。after和before怎么能不提呢？使用场景太多：常见的"'|'textSymbols之间”，”textbeforeandafter水平线“，”一些特殊的模式甚至组合模式“可以看到：：一个“搜索图标”样式实现后，纯CSS实现的一个很酷的“加载”这篇文章是转载自微信公众号“前端匠人”，可关注以下二维码，转载请联系前端匠人公众号。