focus-within: 当爹妈的，也得关注孩子！
话说江湖上CSS门派，各路英雄好汉，招式繁多，令人眼花缭乱。什么选择器、属性、值，层层叠叠，构成了一个色彩斑斓的网页世界。今天咱们要聊的，就是CSS门派里一个比较低调，但实用性极强的招式——:focus-within伪类。
这:focus-within，乍一听名字，就有点“事儿妈”的味道。它不像:hover那样，鼠标一上去就起范儿；也不像:focus那样，自己聚焦了才亮堂。它啊，专门关注自己的“孩子”们，也就是子元素。只要它内部的任何一个“熊孩子”获得了焦点，它这个当爹妈的，就跟着一起“亮起来”！
是不是有点像现实生活？孩子考试考好了，家长脸上也跟着有光；孩子闯祸了，家长也跟着提心吊胆。:focus-within就是这么个意思，它让父元素能够感知到子元素的状态，从而做出相应的反应。
举个栗子：表单的爱
咱们最常见的场景就是表单了。一个标准的登录框，通常由一个<form>包裹着多个<input>和<label>。如果用户点击了用户名输入框，:focus伪类会让这个输入框高亮显示，提示用户正在输入。但是，仅仅高亮输入框，总感觉有点单薄，缺少一种整体感。
这时候，:focus-within就派上用场了！我们可以给<form>元素应用:focus-within样式，当任何一个输入框获得焦点时，整个表单都会高亮显示，或者添加一些阴影效果，让用户更清楚地知道自己正在操作哪个表单。
form {
border: 1px solid #ccc;
padding: 10px;
}
form:focus-within {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-color: #007bff; /* 突出显示边框 */
}
input {
margin-bottom: 5px;
}这段代码的意思是：
- 首先，我们给
<form>元素设置一个默认的边框和内边距，让它看起来像一个容器。 - 然后，当
<form>元素内部的任何一个元素获得焦点时，:focus-within伪类就会生效。 - 我们给
:focus-within状态下的<form>元素添加了一个阴影效果，并修改了边框颜色，使其更加醒目。
这样一来，用户在填写表单时，就能更清楚地看到自己正在操作的区域，提升了用户体验。
再来一个栗子：导航菜单的关怀
除了表单，导航菜单也是一个很好的应用场景。想象一下，一个复杂的下拉菜单，里面包含了很多链接。当用户通过键盘导航到某个链接时，仅仅高亮显示这个链接，可能不够清晰。
我们可以给整个下拉菜单的容器应用:focus-within样式，当菜单中的任何一个链接获得焦点时，整个菜单都会高亮显示，或者展开一个更大的区域，方便用户浏览和选择。
<nav>
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">产品</a>
<ul>
<li><a href="#">产品 A</a></li>
<li><a href="#">产品 B</a></li>
<li><a href="#">产品 C</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>nav ul li ul { /*隐藏二级菜单*/
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
nav ul li:focus-within > ul { /*二级菜单：当li内元素获得焦点时显示*/
display: block;
}
nav ul li a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
nav ul li a:hover {
background-color: #ddd;
}在这个例子中，我们利用:focus-within来控制二级菜单的显示与隐藏。当用户通过键盘导航到包含二级菜单的<li>元素时，:focus-within伪类会让二级菜单显示出来，方便用户选择。
深入挖掘：:focus-within的特性
了解了:focus-within的基本用法，我们再来深入挖掘一下它的特性。
-
继承性：
:focus-within不具有继承性。也就是说，即使父元素应用了:focus-within样式，它的子元素也不会自动继承这个样式。只有当子元素本身获得焦点时，父元素才会应用:focus-within样式。 -
优先级：
:focus-within的优先级与:hover、:active等伪类相同。如果多个样式规则同时应用于同一个元素，浏览器会根据CSS的优先级规则来决定最终应用的样式。 -
兼容性：
:focus-within的兼容性还算不错，主流浏览器都支持。但是，一些老版本的浏览器可能不支持，所以在使用时需要注意兼容性问题。可以通过一些polyfill或者JavaScript库来解决兼容性问题。
:focus-within的妙用：不仅仅是美观
:focus-within不仅仅可以用来美化界面，提升用户体验，还可以用于一些更高级的交互设计。
-
无障碍访问： 对于键盘用户来说，
:focus-within可以帮助他们更清楚地了解当前的操作区域，提高网站的可访问性。通过合理地使用:focus-within，我们可以让网站更加友好，方便所有用户使用。 -
表单验证： 我们可以结合
:focus-within和:invalid伪类，实现更友好的表单验证提示。当用户在一个表单项中输入了错误的信息，并且该表单项获得了焦点时，我们可以给整个表单或者包含该表单项的容器应用:focus-within样式，突出显示错误信息，引导用户更正。 -
自定义组件： 在构建自定义组件时，
:focus-within可以帮助我们更好地控制组件的状态和外观。例如，我们可以创建一个自定义的下拉菜单组件，利用:focus-within来控制菜单的展开和收起，以及菜单项的选中状态。
写在最后：当爹妈的，要学会放手，也要适时关怀
:focus-within就像一个关注孩子成长的家长，它默默地关注着子元素的状态，并在适当的时候给予支持和引导。但是，它并不会过度干预，而是让子元素自由发展。
在使用:focus-within时，我们需要把握好“关怀”的度，不要过度使用，以免造成视觉上的混乱。只有合理地运用:focus-within，才能真正提升用户体验，让我们的网站更加友好和易用。
总而言之，:focus-within是一个非常实用的CSS伪类，它可以帮助我们更好地控制父元素的状态，提升用户体验，提高网站的可访问性。希望通过这篇文章，你能对:focus-within有一个更深入的了解，并在实际项目中灵活运用。
记住，当爹妈的，要学会放手，也要适时关怀。用好:focus-within，让你的网页更上一层楼！