focus-within基本用法

发布时间 2023-08-11 19:04:47作者: 看风景就

xx:focus-within

xx的子元素被聚焦,则选择器触发,可实现父选择器功能

除了 <button>,<input>,<select>,<a> 这些可聚焦的元素,

可通过 tab-index 或 contenteditable 这些属性使得元素可聚焦

这样任何元素都能触发 focus-within 选择器

由于任何元素都可触发 html的 focus-within,可通过html可指向任何子元素

html:focus-within xx {

}

如此,a元素 聚焦可触发页面上任何 b元素 改变样式

元素如何成为焦点有多种方式,它可以被点击或轻触,或通过其他方式导航,甚至通过JavaScript聚焦(document.querySelector("xx").focus())

 

 

 

参考:详细了解CSS :focus-within伪类及其交互应用