使用 :focus-within CSS 选择器吸引用户的注意力

这是一个巧妙的小技巧：

您可以使用:focus-within选择器来设置焦点元素的父级样式。

这样，您无需编写任何 JavaScript 代码即可创建一些交互式表单 UI。请尝试以下示例：

此演示使用了:focus-within，以及::before伪选择器和一些绝对定位技巧。我们将详细介绍，但您可以查看下面的完整源代码。

:focus-within选择器+::before伪元素+绝对定位

所有内容都在一个声明块中！让我们来看看这个例子最重要的部分。

body:focus-within::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

body:focus-within

只要焦点在正文内，此选择器就会应用样式！

哦，而且:focus-within适用于任何元素。我们body只在本例中使用它。

.literallyAnyElement:focus-within您可以发挥创造力，随意构思和使用此选择器。

body:focus-within::before+ 绝对定位

在我们的例子中，这意味着每当任何字段聚焦于主体时，::before就会创建一个具有以下样式的伪元素：

content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);

该content: ''属性是伪元素所必需的，其他所有属性都是用于创建填充整个屏幕的深色透明覆盖层的属性！

额外的东西让它正常工作

请记住，您仍然需要进行一些调整才能使覆盖完美地工作。

html,
body {
  height: 100vh;
}

这样可以确保即使页面上没有足够的内容，覆盖层也能填满整个屏幕。

form {
 position: relative;

这position: relative;确保覆盖层呈现在表单下方。

本周的妙招就到这里。感谢阅读！

请务必查看本系列中的其他技巧，如果您发现我的任何文章有帮助，请在 Twitter 上关注我😄

编辑：请务必查看下面评论中安德鲁的建议！

照片由Stefan Cosma在 Unsplash 上拍摄