代码中&.focus、&:focus的差别是什么？为什么两个都要写？

来源：4-11 精益求精 - Buton 组件编码第二部分

血夜之末

2023-04-05

老师，这个.focus和:focus的差别是什么？

听到老师说是focus状态和focus类。但不太理解差别是什么？也不知道为什么要同时写两个？囧

写回答

1回答

张轩

2023-04-05

同学你好

两个指代的是不同的状态，一个是原生的 focus 被触发的时候，一个是有 focus 类的时候。

&:focus：表示选择当前元素获得焦点的状态。在 HTML 中，我们可以通过将某个元素设置为可聚焦元素（例如 <input>、<select>、<textarea> 等），然后使用鼠标或键盘将焦点聚焦到这个元素上来触发获得焦点的状态。&:focus 就表示选择当前获得了焦点的元素。

&.focus：表示选择当前元素带有 focus 类的状态。在 HTML 中，我们可以通过 JavaScript 将某个元素的 class 属性中添加 focus 类来标记该元素处于聚焦状态，例如 <button class="focus">Click Me</button>。&.focus 就表示选择带有 focus 类的元素。

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2123 学习 · 959 问题

查看课程

相似问题

focus类有用到吗

回答 1

module和target字段的区别是什么？

回答 1

cleanup的一个更细节的问题

回答 1

before render为什么执行了两遍

回答 2

其实我最关心的是React.ButtonHTMLAtrribute 为什么要添加<HTMLElement>泛型？

回答 1

打开慕课网App查看更多内容