粥粥粥菌

巧用z-index与后续兄弟选择器实现循环翻牌效果 先看效果 点击卡片就能切换一张，并且整个实现过程并没有用到js。这个样例中除了两张卡片外其实还有两个透明的input，你点击到的其实是这俩input

巧用grid布局优雅实现 定高定宽向不定宽高height:auto 有时候我们会遇到这种情况，容器内部由元素撑开无法知道其高度，又需要实现平滑过渡。就像这样： 我相信作为CSS初学者都有过这样的尝试

通过收藏书签向任意网站注入javascript，召唤看板娘 将下面这个蓝色方块拖拽至收藏夹栏再松开鼠标，浏览器会自动创建一个书签。 然后我们随意打开一个网站，点击这个书签，看板娘就会出现在网页上啦！

利用contenteditable属性实现不定宽度的输入框input 有些时候我们需要制作宽度随输入的文字变化的输入组件，例如下面这个tag输入框： 这个时候常规的input就显得有些困难了。

使用checked伪类实现点击按钮切换input输入框的可输入状态 答案是使用`pointer-events`属性，它用来定义元素如何响应用户的点击。例如下边这两个例子：

通过:has()伪类和属性选择器纯CSS实现筛选器 在这个例子中，两个div没有任何类名，不过都被赋予了一个自定义属性`linkto`。我们可以借此通过`[linkto='box1']`来选中他们，赋