好用的focus-within伪样式，顺便再提一嘴copilot
我发现这copilot
到时候我是要付费了
因为他确实可以提高效率
就比如说
刚才我想给这个 div 加一个阴影
然后我不是忘了阴影样式怎么写吗
然后直接想到的就不是去网上搜一下
而是什么呢
写个注释
就像这样
哎你看他就有了
刚才提示的不是这个
我换一个换成这个
大家看 阴影就有了
那我们把颜色再减淡一点
像这样
然后呢我们今天啊顺便说一个问题
就是什么呢
我现在想让这个文本框拿到焦点以后
啊这个阴影稍微变深一点
怎么办呢
我们可以这样用 wrapper
然后加一个 focus-within
这样
我们把这个样式复制过来
我们把这个颜色加深一点
距离扩大一点
好我们再看一下
就这样就可以了
那这是什么意思呢
意思就是当这个 wrapper 元素获取焦点
或者
这个 wrapper 的子元素获取焦点的时候
他都会应用这个样式
好再然后你会发现他现在这个
获取焦点的时候啊
（阴影变化）比较生硬
我想给这个阴影啊加一个过渡动画
然后这个过渡的动画呢
我又忘了怎么写了
然后我又想到注释了
然后呢把它拿过来
动画过渡
好我们来看一下
他这是二
我们把它换成这个
然后我们用零点二秒就够了
大家看 就可以了
最后更新于