如果您需要对伪级的复习，请在我们的CSS课程中跳到CSS伪类课程。
：焦点伪级
首先，首先，：focus
伪级适用于元素
进一步读取：
：非相互作用的元素，例如``lt; p＆gt;，h1＆gt;，blockquote＆gt;，code et，code et，等，等等，都不是集中的，因此不能成为：focus：focus。只有当我们将Tabindex属性设置在它们上，我们才能期望：专注于它们。
>返回：焦点，此伪级用于选择，然后在元素处于重点状态时将样式应用于元素。 也许，这样做的最幼稚的例子是考虑一个输入字段，如下所示：
>实例示例
>我们单击输入字段时，它会接收到焦点，因此，浏览器将黑色轮廓应用到其上，如下所示：
>这有助于我们立即查看我们目前以许多输入字段的形式以哪个输入。
>您如何看待，我们可以确定我们目前的哪个输入？ 设计任何类型的用户界面的理想之处是
“使一切都尽可能容易。'>，在这种情况下，只需使用：focus pseudo即可轻松实现这个理想的世界-class。 本质上：
：焦点伪级（甚至其他两个焦点伪级）都可以帮助我们
提高网页的可访问性。 >通过视觉上清楚地与用户沟通他当前在网页上的位置，我们使他很容易与网页互动并完成他的工作而不会混淆。 >换句话说，：焦点比我们想象的更重要。
。，但这并不是唯一重要的基于焦点的伪级；我们也有
：focus-visible。
>问题：聚焦
在上面的示例中：焦点，我们考虑了一个基本的文本输入字段。现在，让我们转到一个按钮，以查看以下缺点：focus。
>实例示例
<label> <span>Name</span> <input type="text" name="name"> </label>
<button>A button</button>
，但是请等一下？这是我们想要的愿望吗？
>另一种说法：
>让我们了解为什么... 当我们单击一个按钮或任何交互元素时，通常是为了执行操作的任何交互元素时，例如。链接 - 我们已经知道网页上的位置。显然，因为我们有意识地在按钮上单击，所以我们当然不会对网页上的哪个元素进行焦点感到困惑 - 我们显然知道是我们刚刚单击的按钮当前具有焦点。 在这方面，在视觉上强调按钮是当前集中的元素，这是没有多大意义的。
但是，为什么这对于输入字段有意义？ 好问题。您的观察结果是：当我们将其在输入字段上使用时，焦点绝对可以正常工作，并且有一个简单的原因。当我们使用鼠标单击输入字段时，我们的作业未完成
>；我们仍然必须将数据输入到字段中。>由于我们的工作尚未完成，因此我们很快，显然需要知道哪个输入目前处于活动状态。
最重要的是注意，输入字段和按钮（以及其他类似的交互式元素）之间的重要但微妙的区别： ，但请记住，这种推理仅适用于我们使用鼠标与这些元素进行交互时。 >让我们找出...
如您所知，不仅可以使用鼠标在网页周围导航；我们也可以为此使用键盘， 想象有人打破了他们的鼠标设备，现在想为他们的考试做准备，目前无法订购另一个。最糟糕的情况是，如果该人想从仅围绕鼠标互动构建的网站做准备。 让我们再次说明。 >但是，当我们使用键盘时，创建视觉强调是最必要的
问题是我们无法使用：专注于这种样式关注的问题，因为...好 >
现在怎么样？
不需要担心，因为我们有：focus-visible进行救援！>
：焦点可见的伪级
>我非常强调以下事实：在学习编程中的任何东西之前，先凝视其命名法（ ）。含义本身的含义很高。>
之后，如果我们分析了名称：focus-discible，它显然与 有关，但与'可见'。 > >您可以通过名称弄清楚这个伪级的含义？
好，：焦点可见度适用于焦点 焦点可见的元素。
：仅当我们使用键盘或其他一些非小鼠互动将焦点置于焦点时（例如，用于使用JavaScript）。
最重要的是 - 这真的很重要 - ：当焦点可视化不适用于按钮（以及类似元素），当它们通过鼠标互动而获得焦点时，它们不适用于 >这样，让我们回到我们的lt; button＆gt;上面的示例并替换为：焦点规则：focus-visible，以便仅当按钮通过键盘接收到焦点时才显示轮廓：
>实例示例 这是我们单击按钮（使用鼠标）时得到的： 什么都没有。 >但是，当我们按下标签键以导航到按钮并将其重点放在焦点上时，我们会得到与以前相同的轮廓： >这使我们得到了最终的结论，即当造型按钮（或其他类似类似的元素，例如，例如＆lt; a＆gt;）时，我们必须最好使用：focus-vissible而不是：focus：focus（由于上面看到的原因）。 🎜>
：焦点可见是英雄！ （但是我不知道电影的名字！）
：focus-withinpseudo-class，我们无法结束本文。让我们现在就这样做。>
>换句话说，任何包含匹配的后代元素的元素：焦点或本身匹配：焦点，是：focus-within。
以下是一个示例：
>我们在a＆lt; div; div;中包含一个按钮。我们的目标是设计＆lt; div＆gt;特别是当它的按钮焦点时。以下CSS实现了这一点：
很基本。 ？注意：请记住：焦点 - 焦点的行为完全像：聚焦在其中，它也显示在按钮上的鼠标相互作用上。它没有表现出类似的行为：焦点可见。 >现在，您可能正在寻找一个更实用的例子：焦点 - 温命，这正是我接下来要做的。 ：焦点 - 温辛并不是CSS中常用的，但是某些情况下可以很好地使用：focus-within来优雅地解决。继续阅读以了解这种情况。 >假设我们在网站上有一个可访问栏，该网站仅在使用键盘导航时出现。最初，它是隐藏的，但仅在视觉上；也就是说，可以将其标记为此栏内的任何一个按钮。 ？注意：'仅视觉上隐藏'意味着元素没有显示：无或可见性：隐藏在其上以其他方式将其隐藏起来。例如，不透明度：0仅在视觉上隐藏一个元素。 >现在，当此可访问性栏中的任何按钮都焦点焦点时，就需要向用户展示此栏。 但是，当其两个按钮都有焦点时，如何选择可访问性栏？ >是'可访问性'的简短形式，所需的选择器将为.a11y-bar：focus-within。
> .a11y-bar：焦点 - 焦点在焦点驻留在其中时选择.a11y-bar，这正是我们需要的。
好！
>实例示例
进一步阅读
尽管我们已经涵盖了几乎需要了解的所有内容：focus，：focus-codis-com-cob-within，但从某些资源中进一步阅读仍然有价值： 了解成功标准2.4.7：聚焦可见| Wai | W3C
>
同样。
实际上，如果以这种方式构建网页以启用鼠标互动，则非常难以访问。
<label>
<span>Name</span>
<input type="text" name="name">
</label>
），适用于其中具有>的元素
>。
实用用例：焦点 - 件
使用CSS：可提供的焦点可提供键盘焦点指示 - WCAG 2.1技术
9.3。输入焦点pseudo-class ：： focus - 选择器级别4 | W3C
以上是CSS中的焦点，焦点可见度和：焦点 - 焦点之间有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！
