使用 tabindex 配合 focus-within 巧妙实现父选择器-Windows系列-PHP中文网

使用 tabindex 配合 focus-within 巧妙实现父选择器

絕刀狂花

发布： 2025-09-25 08:38:01

原创

751人浏览过

本文将介绍一个不常用的技巧，通过 tabindex 与 :focus-within 的巧妙组合，实现类似父选择器的功能。

在 CSS 中是否存在父选择器？这是个经典的问题。目前为止，CSS 并没有被广泛实现的父选择器，这与浏览器的渲染机制有关。

如果你对 CSS 中是否存在父选择器有疑问，可以参考知乎上的讨论 -- CSS 中能否选择父元素？

当然，这并不意味着 CSS 完全无法通过子元素控制父元素。利用 :focus-within 伪类，我们可以达到类似的效果。

:focus-within 伪类简介:focus-within 是一个伪类，表示一个元素获得焦点，或其后代元素获得焦点。重点是它或其后代获得焦点。

如果你对 :focus-within 不太了解，可以先阅读这篇文章：《神奇的选择器 :focus-within》

通过这个伪类，我们可以实现类似这样的功能：当子元素获得焦点（focus事件）时，触发该伪类，从而实现一个狭义的父选择器，类似于：

使用 tabindex 配合 focus-within 巧妙实现父选择器 CodePen -- CSS focus-within INPUT

:focus-within 伪类实现父选择的局限性利用 :focus-within 实现父类选择器的最大问题是，元素必须有 focus 事件，才能触发它或其父元素的 :focus-within。

因此，我之前认为 :focus-within 只能与 <input>、<textarea> 等元素一起使用。

这大大限制了它的使用场景。基于此，我们引入本文的另一个主角 -- tabindex。

使用 tabindex 使元素获得 focus 事件tabindex 是 HTML 标签的一个属性，表示元素是否可以聚焦，以及它在键盘导航中的顺序（通常使用Tab键）。

也就是说，一个普通的 <div> 标签是没有 focus 事件的，但如果我们给它加上 tabindex 属性，它就会像 <input> 框一样获得 focus 事件，再结合 :focus-within，可以大大扩展其应用场景。

看看伪代码：

<div tabindex="0" class="g-father">
    <button>Click</button>
</div>

登录后复制

结合 :focus-within，当点击子元素时，就可以改变父元素的样式。

并且，我们可以在任何元素上使用 tabindex，不再受限于 <input>、<a> 等元素才有 focus 事件。

琅琅配音

全能AI配音神器

208

查看详情

.g-father:focus-within {
    background: #fc0;
}

登录后复制

使用 tabindex 配合 focus-within 巧妙实现父选择器 CodePen -- tabindex 配合 focus-within 实现div的父选择器

一个小细节，button 的 focus 事件在 Safari 和 Firefox 上的冒泡问题由于 <input> 元素（或任意元素 + tabindex）结合 :focus-within 的方案依赖于 focus 事件的冒泡。

对于 <button> 元素，有两个特殊问题：

在 MacOS 的 Safari 和 Firefox 中，点击 <button> 元素，不会触发 focus 事件，也没有 focus 事件冒泡。
在 Windows 的 Safari 和 Firefox 中，点击 <button> 元素，会触发 focus 事件，但在被目标元素捕捉到之后，不会继续向上冒泡。

我们来验证一下，使用类似这样的结构：

<input type="text" />
<button>Click me</button>
<p><style>
input:focus {
background: #00bcd4;
}
body:focus-within {
background: blue;
}
.g-father:focus-within {
background: red;
}
</style>

登录后复制

在 Chrome 下的表现：

使用 tabindex 配合 focus-within 巧妙实现父选择器在 Windows 的 Safari 和 Firefox 下的表现：

使用 tabindex 配合 focus-within 巧妙实现父选择器在 MacOS 的 Safari 和 Firefox 下的表现：

使用 tabindex 配合 focus-within 巧妙实现父选择器在 Chrome 上表现正常，而在 Windows 的 Safari 和 Firefox 上，会触发 <button> 的 focus 事件，但不会触发父元素的 :focus-within 事件，即 focus 事件在被目标元素捕捉到之后，不会继续向上冒泡。而在 Mac 上，则连 focus 都不会触发。