focus-within基本用法

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伪类及其交互应用