焦点 vs 焦点内

今天我们将讨论几个不同的伪类。如果你不清楚什么是伪类，我建议你先从这篇文章开始。

Hover 伪类简介

我们将讨论focus和focus-within，但在此之前，值得回顾一下在 CSS 上下文中可聚焦的含义。

如果一个元素可以通过点击、点击或 Tab 键选中，则该元素可聚焦。表单输入框和链接就是很好的例子。

当用户关注某个元素时，尽管方式不同，但都会触发focus和伪类。focus-within

我们focus先回顾一下。这个伪类应用于一个元素。当该元素获得焦点时，样式就会显示出来。

以这个输入列表为例。每个输入都有自己的 ID 和相应的focus样式。

根据您选择的输入，它将具有相关的背景颜色。

请注意，这个伪类会响应元素状态并将样式应用于同一元素。对于我们的下一个示例，情况并非如此。

Focus-within 被分配给父元素。当任何子元素获得焦点时，样式规则都会应用。例如，选择输入框、点击链接等。

事实证明，我们之前的列表示例就很好用。如果我们假设每个元素input都是子元素，那么它们就构成了li父元素。那么，让我们添加focus-within元素li。和之前的示例一样，我们实际上是添加一个 id，并将其与每个 li 元素关联起来。

如果我们点击一个输入，我们会看到周围的元素呈现出颜色。

那么究竟发生了什么？li元素正在查看input其内部。当其input获得焦点时，样式就会被应用。但是，由于规则位于元素上，因此即使状态更改发生在中，li样式也会应用于元素。liinput

有道理吗？

让我们看另一个例子。li元素还有另一个父元素ul。如果我们将focus-within伪类应用于该元素会怎么样？

如果我们点击内部，input样式ul就会应用到ul元素上。

这些 CSS 特性真的很棒，了解它们之间的区别能帮助你更直接地应用样式。迫不及待想看看你的成果！