想要在父元素的子元素成为焦点时设置父元素的样式吗？
从本质上讲， 可访问性意味着消除障碍，以创建一个在线世界， 所有用户都可以体验您的内容并与之互动。
在本文中，我将缩小一个相对较新的CSS选择器“ ：focus-within ”，并说明如何将其合并到自己的项目中以增强用户体验。
那么，这个神秘的选择器到底是什么？它有什么作用？
：Focus-within可让您在“关注”其单个子元素之一时为整个父元素设置样式。 当用户将焦点放在其字段之一（ 即子元素 ）上时，通过突出显示整个容器（ 即，父元素 ），此选择器通常用于为表单设置样式并使其更加用户友好。
如今，大多数主流浏览器中都提供了该功能。
到目前为止，您可能正在考虑一个非常类似的选择器：focus，并想知道它与：focus-within有何不同。
别担心，我得到了你。
与：focus选择器不同，：focus选择器仅允许您对一个焦点元素进行样式设置，而：focus-within是唯一的，因为当您仅关注其子元素之一时，可以对整个父元素进行样式设置。
这是一些视觉上的糖来凸显这种差异……
在下面的Codepen示例中，乍一看，有两种形式看起来完全相同。 但是，虽然形式1和2都使用：focus选择器设置样式，形式2也使用：focus-within设置样式。 当您将元素置于焦点时， ：focus-within的独特效果将变得清晰：
在上面的示例中，我关注的单个输入点亮了，显示了我使用：focus（在本例中为灰色边框）应用于表单输入的样式。 当我专注于“名字”输入时，只有该元素（而不是其他元素）会更改其样式。
让我们继续前进并将焦点转移（ 看看我在那儿做了什么？ ）以形成表格2 ，该表格使用：focus和：focus-within进行了样式设置。
当我专注于“名字”输入时，会发生以下情况：
刚刚发生了什么？
除了突出显示单个 （使用灰色边框的样式）外，当我单击其子元素之一（“ First name”输入）时，整个表单的容器还带有蓝色背景和黑色边框。 如果我单击表单的任何其他子元素，则可能会发生相同的情况。
好吧，我现在要讲清楚。 这是您将：focus-within应用于元素的方法：
我对：focus-within的最喜欢的事情之一就是它非常易于使用：您只需将选择器应用于父元素或容器即可。
这是我用来设置以上两种形式的代码的一小段：
记住我们所涵盖内容的简单方法：
如果您发现区分：focus和：focus-within令人困惑，那么将两个选择器都视为同一个“家庭”中的兄弟姐妹可能会有所帮助。除外，尽管：focus兄弟姐妹喜欢保持自已，但：focus -inner是需要稍多一点的兄弟姐妹，他的父母对此给予了更多关注，这就是为什么这个唯一的选择器允许我们在子元素获得焦点时设置父元素的样式。
对于那些对使网站更易于访问和用户友好的新颖，简便方法感兴趣的人，请考虑在下一个项目中使用：focus-within 。
