221. 【CSS-选择器世界】-focus-within-实现无障碍访问的输入框

整体聚焦伪类 :focus-within 非常实用，且兼容性不错，目前已经可以在实际项目中实用，包括移动端项目和无须兼容 IE 浏览器的桌面端项目。

一、 :focus-within 和 :focus 伪类的区别

CSS:focus-within 伪类和 :focus 伪类的有很多相似之处，那就是伪类样式的匹配离不开元素聚焦行为的触发。区别在于 :focus 伪类样式只有当前元素处于聚焦状态的时候才匹配，而 :focus-within 伪类样式在当前元素或者是当前元素的任意子元素处于聚焦状态的时候都会匹配。

举个例子：

form:focus {
  outline: solid;
}

表示当 处于聚焦状态的时候， 元素的 outline（轮廓）才会出现。

form:focus-within {
  outline: solid;
}

表示 元素自身，或者 内部的任意子元素处于聚焦状态时， 元素的 outline （轮廓）都会出现。换句话说，子元素聚焦，可以让父级元素的样式发生变化。

这是 CSS 选择器世界中很了不起的革新，因为 :focus-within 伪类的行为本质上是一种“父选择器”行为，子元素的状态会影响父元素的样式。由于这种“父选择器”行为需要借助用户的行为触发，属于“后渲染”，不会与现有的渲染机制相互冲突，因此浏览器在规范出现后不久就快速支持了。

二、实现无障碍访问的输入框

:focus-within 伪类非常实用，一方面它可以用在表单控件元素上（无论是样式自定义还是交互布局）。例如输入框聚焦时高亮显示前面的描述文字，我们可以不用把描述文字放在输入框的后面，正常的 DOM 顺序即可：

<!-- html 代码 -->
<div className={"cs-normal"}>
  <label className={"cs-label"}>用户名：</label><input className={'cs-input'}/>
</div>

//css 代码
.cs-normal:focus-within .cs-label {
  color: darkblue;
  text-shadow: 0 0 1px;
}