简介
focus-within 是一个 npm 包，它提供了一种在 CSS 中使用 :focus-within 伪类选择器的方式。使用这个选择器可以轻松地为有焦点的父元素应用 CSS 样式，而不需要使用 JavaScript 来实现。
安装
我们可以使用 npm 安装 focus-within 包:
npm install focus-within --save
或者，我们可以直接从 CDN 上引用：
<link rel="stylesheet" href="https://unpkg.com/focus-within@^1.0.0/dist/focus-within.min.css">
用法
- 在 CSS 中使用 :focus-within 伪类选择器
.parent:focus-within {
/* 父元素被 focus 时应用样式 */
}- 在 html 中，给父元素添加 tabindex 属性
<div tabindex="0" class="parent"> <input type="text" /> </div>
优势
- 实现简单，不需要使用 JavaScript
- 与 HTML 和 CSS 无缝集成
- 支持大多数主流浏览器
示例代码
下面是来自 MDN 的一个例子，用 focus-within 实现当输入框有焦点的时候，其父元素的颜色变化：
-- -------------------- ---- ------- -- ---------------------- -- ------------------------- ----------- ----------- - ----------------- ------- - -- ---- -- ----------- - -------- ---- ------- ---- -------- --- ----- ------------ ----------- - - ---- - ----------- ----- - -------- ------ ------- - - ------- - ----------- ----- - ------ ----- -------- ------- ------- ----- -------- ----- ---------- ------- ----------------- ----- -
-- -------------------- ---- -------
---- -- ---
---- -------------------
-------
---
------ ----------- --
--------
------
---- -------------------
-------
---
------ ----------- --
--------
------结论
focus-within 是一个简单但强大的工具，可以大大提高我们的工作效率，使我们能够更好地实现设计和交互。它支持大多数主流浏览器，使得我们的工作更加便捷。通过上面的教程和示例代码，我们相信您已经可以轻松地使用 focus-within 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f794c4a7116197505561b2c