简介

长期以来，仅使用css来选择父元素是不可能的，但伪类：Focus-in在一定程度上改变了这一点。它允许在元素具有焦点时设置元素样式，也允许在元素的任何内部元素(子元素)具有焦点时设置样式。最好的例子是一个表单，在该表单中，当用户将焦点放在一个输入元素上时，您会希望容器元素以某种方式设置样式。

Html和CSS代码

这里有一个使用：Focus-in with a form的例子。让我们从这个标记开始：

1<form tabindex="0" class="myForm">
2  <h3>What's your favorite color?</h3>
3  <input type="text">
4</form>

我们的css规则如下：

 1.myForm:focus-within {
 2  background: #f8f8f8
 3    repeating-linear-gradient(
 4      45deg,
 5      transparent,
 6      transparent 35px,
 7      rgba(255, 255, 255, 0.5) 35px,
 8      rgba(255, 255, 255, 0.5) 70px
 9    );
10}
11.myForm:focus-within::before {
12  content: "I'm a happy selected form!";
13  color: rgb(239, 187, 53);
14}

工作演示

如果您使用的是支持的浏览器，您可以在下面看到结果。请注意，当表单本身被聚焦或其中一个输入被聚焦时，不同的背景如何应用于包含的表单元素。

如果我们使用了Good old：Focus伪类而不是**：Focus-in** ，那么我们的容器表单将只在焦点位于表单本身时设置样式，而不是在输入被聚焦时设置样式：

感谢css背景图案的Lea Verou。_

结论

为了让：Focus-Inside按预期工作，您必须确保容器的内部元素是可聚焦的。默认情况下，输入元素是可聚焦的，但div、img或p元素则不能。Tab索引attribute可用于使元素可聚焦。容器元素也应该是可聚焦的，以便在仅从容器聚焦时接收样式。

<$>[注意]浏览器兼容性检查： 截至2020年，所有现代浏览器都支持focus-within，但请检查[我可以使用](http：//caniuse.com/# feat=css-focus-within)以了解详细的、特定于版本的浏览器支持。<$>

CSS :focus-within 伪类

简介

Html和CSS代码

工作演示

What's your favorite color?

结论