#DDD | cosine - 前端人の日常频道

#书摘 #css #前端
《CSS 选择器世界》7.4 非常实用的整体焦点伪类 :focus-within
整体焦点伪类 :focus-within 非常实用，且兼容性不错，目前已经可以在实际项目中使用，包括移动端项目和无须兼容IE浏览器的桌面端项目。
1. :focus-within 伪类和 :focus 伪类的区别
ChS :focus-within 伪类和 :focus 伪类有很多相似之处，那就是伪类样式的匹配离不开元素聚焦行为的触发。区别在于，:focus 伪类样式只有在当前元素处于聚焦状态的时候才匹配，而 :focus-within 伪类样式在当前元素或者当前元素的任意子元素处于聚焦状态的时候均匹配。

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

2. :focus-within 伪类实现无障碍访问的下拉列表
:focus-within伪类非常实用，一方面它可以用在表单控件元素上（无论是样式自定义还是交互布局），例如输入框聚焦时高亮显示前面的描述文字，我们可以不把描述文字放在输入框的后面（具体见5.4.2节中的示例），按正常的DOM顺序即可：



<div class="cs-normal">
 <label class="cs-label">用户名：</label>
 <input class="cs-input">
</div>
.cs-normal:focus-within .cs-label {
 color: darkblue;
 text-shadow: 0 0 1px;
}

读者可以手动输入 https://demo.cssworld.cn/selector2/7/4-1.php 体验与学习。

另一方面，它可以用于实现完全无障碍访问的下拉列表，即使下拉列表中有其他链接或按钮也能正常访问。例如，要实现一个类似图7-10所示的下拉列表效果。
HTML结构如下：
:focus 伪类的区别
ChS :focus-within 伪类和 :focus 伪类有很多相似之处，那就是伪类样式的匹配离不开元素聚焦行为的触发。区别在于，:focus 伪类样式只有在当前元素处于聚焦状态的时候才匹配，而 :focus-within 伪类样式在当前元素或者当前元素的任意子元素处于聚焦状态的时候均匹配。

子元素聚焦可以使父元素的样式发生变化，这是CSS选择器世界中很了不起的革新，因为 :focus-within 伪类的行为本质上是一种父选择器行为，子元素的状态会影响父元素的样式。由于这种父选择器行为需要借助用户的
我们在父元素 .cs-details 上使用 :focus-within 伪类来控制下拉列表的显示和隐藏，如下：



.cs-datalist {
   
 display: none;
   
 position: absolute;
   
 border: 1px solid #ddd;
   
 background-color: #fff;

}
/* 下拉列表展开 */

.cs-details:focus-within .cs-datalist {
   
 display: block;
}

本例中共有5个 <a> 元素，其中一个用于触发下拉显示的 .cs-summary 元素，另外4个在下拉列表中。无论点击这5个 <a> 元素中的哪一个，都会触发父元素 .cs-details 设置的 :focus-within 伪类样式，因此可以让下拉列表一直保持显示状态；点击页面任意空白处，下拉列表自动隐藏，效果非常理想。
读者可以手动输入 https://demo.cssworld.cn/selector2/7/4-2.php 体验与学习。

https://memo.cosine.ren/m/334

demo.cssworld.cn

:focus-within高亮输入框前面的描述文字 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 :focus-within高亮输入框前面的描述文字