本文将介绍一个不常用的技巧，通过 tabindex 与 :focus-within 的巧妙组合，实现类似父选择器的功能。
在 CSS 中是否存在父选择器？这是个经典的问题。目前为止，CSS 并没有被广泛实现的父选择器，这与浏览器的渲染机制有关。
如果你对 CSS 中是否存在父选择器有疑问，可以参考 知乎上的讨论 -- CSS 中能否选择父元素？
当然，这并不意味着 CSS 完全无法通过子元素控制父元素。利用 :focus-within 伪类，我们可以达到类似的效果。
:focus-within 伪类简介:focus-within 是一个伪类，表示一个元素获得焦点，或其后代元素获得焦点。重点是它或其后代获得焦点。
如果你对 :focus-within 不太了解，可以先阅读这篇文章：《神奇的选择器 :focus-within》
通过这个伪类，我们可以实现类似这样的功能：当子元素获得焦点（focus事件）时，触发该伪类，从而实现一个狭义的父选择器，类似于：
CodePen -- CSS focus-within INPUT
:focus-within 伪类实现父选择的局限性利用 :focus-within 实现父类选择器的最大问题是，元素必须有 focus 事件，才能触发它或其父元素的 :focus-within。
因此，我之前认为 :focus-within 只能与 、 等元素一起使用。
这大大限制了它的使用场景。基于此，我们引入本文的另一个主角 -- tabindex。
使用 tabindex 使元素获得 focus 事件tabindex 是 HTML 标签的一个属性，表示元素是否可以聚焦，以及它在键盘导航中的顺序（通常使用Tab键）。
也就是说，一个普通的 看看伪代码： 结合 并且，我们可以在任何元素上使用 一个小细节，button 的 focus 事件在 Safari 和 Firefox 上的冒泡问题由于 对于 我们来验证一下，使用类似这样的结构： 在 Chrome 下的表现： 使用时务必注意这一点。 CodePen -- button 的 focus 事件冒泡性验证（Chorme / Safari / Firefox） 好了，本文到此结束，希望对你有帮助 :) 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。 如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。focus 事件的，但如果我们给它加上 tabindex 属性，它就会像 框一样获得 focus 事件，再结合 :focus-within，可以大大扩展其应用场景。:focus-within，当点击子元素时，就可以改变父元素的样式。tabindex，不再受限于 、 等元素才有 focus 事件。.g-father:focus-within {
background: #fc0;
}
CodePen -- tabindex 配合 focus-within 实现div的父选择器 元素（或任意元素 + tabindex） 结合 :focus-within 的方案依赖于 focus 事件的冒泡。 元素，有两个特殊问题：
元素，不会触发 focus 事件，也没有 focus 事件冒泡。 元素，会触发 focus 事件，但在被目标元素捕捉到之后，不会继续向上冒泡。
在 Windows 的 Safari 和 Firefox 下的表现：
在 MacOS 的 Safari 和 Firefox 下的表现：
在 Chrome 上表现正常，而在 Windows 的 Safari 和 Firefox 上，会触发 的 focus 事件，但不会触发父元素的 :focus-within 事件，即 focus 事件在被目标元素捕捉到之后，不会继续向上冒泡。而在 Mac 上，则连 focus 都不会触发。
最后当然，本文介绍的技巧，只能算是一个非常简陋，特定条件（点击目标元素改变父元素样式）下的父选择器，真正意义上的父选择器仍需等待未来规范的实现。
