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

Question

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

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

Answer 1

张轩 2023-04-05 09:45:33

同学你好

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

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

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