CSS中的焦点，焦点可见度和：焦点 - 焦点之间有什么区别？-css教程-PHP中文网

首页

web前端

css教程

CSS中的焦点，焦点可见度和：焦点 - 焦点之间有什么区别？

Patricia Arquette

Jan 28, 2025 pm 04:06 PM

>可以使用鼠标（当我们单击元素时），键盘（当我们通过按选项卡导航到它时）或基础程序（当我们使用JavaScript时）。

进一步读取： 您可以在CSS Pseudo类中详细浏览：focus pseudo-class ：： focus。此外，只有可聚焦元素被允许接收焦点，因此是：焦点的主题。这些通常是html中的交互元素，例如＆lt; input＆gt; ,, textarea＆gt;，button＆gt; of。

？注意

：非相互作用的元素，例如``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>

，但是请等一下？这是我们想要的愿望吗？ The button focused >另一种说法：

是明智的决定，是在我们使用鼠标单击按钮时展示轮廓的明智决定？

>让我们了解为什么... 当我们单击一个按钮或任何交互元素时，通常是为了执行操作的任何交互元素时，例如。链接 - 我们已经知道网页上的位置。显然，因为我们有意识地在按钮上单击，所以我们当然不会对网页上的哪个元素进行焦点感到困惑 - 我们显然知道是我们刚刚单击的按钮当前具有焦点。在这方面，在视觉上强调按钮是当前集中的元素，这是没有多大意义的。

但是，为什么这对于输入字段有意义？好问题。您的观察结果是：当我们将其在输入字段上使用时，焦点绝对可以正常工作，并且有一个简单的原因。当我们使用鼠标单击输入字段时，我们的作业未完成

>；我们仍然必须将数据输入到字段中。

>由于我们的工作尚未完成，因此我们很快，显然需要知道哪个输入目前处于活动状态。

最重要的是注意，输入字段和按钮（以及其他类似的交互式元素）之间的重要但微妙的区别：

输入字段无法立即完成任务> ，因此即使我们使用鼠标与之交互也需要可视化。
一个按钮立即完成任务（例如，将项目添加到购物车中），因此，当我们使用鼠标与其进行交互时，不需要视觉上以视觉上的展示。

因此，在这一点上，我们知道输入字段与：focus pseudo-class很好地凝胶，但对按钮并非如此。

>
，但请记住，这种推理仅适用于我们使用鼠标与这些元素进行交互时。
当我们转移到键盘时会发生什么？
>让我们找出...
使用键盘的交互
如您所知，不仅可以使用鼠标在网页周围导航；我们也可以为此使用键盘，

同样
。
实际上，如果以这种方式构建网页以启用鼠标互动，则非常难以访问。
想象有人打破了他们的鼠标设备，现在想为他们的考试做准备，目前无法订购另一个。最糟糕的情况是，如果该人想从仅围绕鼠标互动构建的网站做准备。> 作为CSS开发人员，我们必须承认这个事实和设计网站在没有鼠标的情况下可以访问。在这方面，我们必须确保在互动元素获得焦点时提供必要的视觉强调。
>现在还包括按钮。
>
让我们再次说明。
> 当我们使用鼠标与网页进行交互时，在其聚焦状态下为按钮（和类似元素）创建视觉重点时，不需要；实际上，正如我们上面看到的那样，这是不可取的。这是因为用户已经知道，单击按钮后，它是焦点的。>
>但是，当我们使用键盘时，创建视觉强调是最必要的。这是因为现在，用户不知道哪个交互式元素是焦点。我们需要
以视觉上的展示。
问题是我们无法使用：专注于这种样式关注的问题，因为...好
...即使我们使用鼠标与它们进行交互时，也适用于按钮。
>

现在怎么样？

不需要担心，因为我们有：focus-visible进行救援！>

：焦点可见的伪级 >我非常强调以下事实：在学习编程中的任何东西之前，先凝视其命名法（
'naming'
）。含义本身的含义很高。> 之后，如果我们分析了名称：focus-discible，它显然与
>'focus'
有关，但与'可见'。 >

>您可以通过名称弄清楚这个伪级的含义？ 好，：焦点可见度适用于焦点
>和的元素，其焦点需要使焦点可见（理想情况下）。紧凑的是，我们还可以说：焦点可见的适用于应该具有其
焦点可见的元素。 ：仅当我们使用键盘或其他一些非小鼠互动将焦点置于焦点时（例如，用于使用JavaScript）。 最重要的是 - 这真的很重要 - ：当焦点可视化不适用于按钮（以及类似元素），当它们通过鼠标互动而获得焦点时，它们不适用于
。
>这样，让我们回到我们的lt; button＆gt;上面的示例并替换为：焦点规则：focus-visible，以便仅当按钮通过键盘接收到焦点时才显示轮廓：
>
>实例示例

这是我们单击按钮（使用鼠标）时得到的：>

<label> <span>Name</span> <input type="text" name="name"> </label>

什么都没有。

>但是，当我们按下标签键以导航到按钮并将其重点放在焦点上时，我们会得到与以前相同的轮廓：
>

>这使我们得到了最终的结论，即当造型按钮（或其他类似类似的元素，例如，例如＆lt; a＆gt;）时，我们必须最好使用：focus-vissible而不是：focus：focus（由于上面看到的原因）。 🎜>
：焦点可见的基本上是双赢的情况，因为（a）我们在单击按钮时不会应用样式，因此使用鼠标，并且（b）我们确实确保我们的网页保持可访问使用键盘并在按钮上使用必要的焦点样式时。

：焦点可见是英雄！（但是我不知道电影的名字！）

那呢：焦点？

显然，如果不忽略较小的有用
：focus-withinpseudo-class，我们无法结束本文。让我们现在就这样做。>
：焦点 - 焦点，顾名思义（记住仔细读取名称
），适用于其中具有
>的元素
>。
>换句话说，任何包含匹配的后代元素的元素：焦点或本身匹配：焦点，是：focus-within。 以下是一个示例：

>我们在a＆lt; div; div;中包含一个按钮。我们的目标是设计＆lt; div＆gt;特别是当它的按钮焦点时。以下CSS实现了这一点：
>实例示例

>按钮接收到焦点的那一刻，＆lt; div＆gt;得到粉红色的背景颜色。

很基本。
>
？注意：请记住：焦点 - 焦点的行为完全像：聚焦在其中，它也显示在按钮上的鼠标相互作用上。它没有表现出类似的行为：焦点可见。

>现在，您可能正在寻找一个更实用的例子：焦点 - 温命，这正是我接下来要做的。
> 如前所述，
：焦点 - 温辛并不是CSS中常用的，但是某些情况下可以很好地使用：focus-within来优雅地解决。继续阅读以了解这种情况。

实用用例：焦点 - 件

>假设我们在网站上有一个可访问栏，该网站仅在使用键盘导航时出现。最初，它是隐藏的，但仅在视觉上；也就是说，可以将其标记为此栏内的任何一个按钮。
>
？注意：'仅视觉上隐藏'意味着元素没有显示：无或可见性：隐藏在其上以其他方式将其隐藏起来。例如，不透明度：0仅在视觉上隐藏一个元素。

>现在，当此可访问性栏中的任何按钮都焦点焦点时，就需要向用户展示此栏。
>
但是，当其两个按钮都有焦点时，如何选择可访问性栏？ >是'可访问性'的简短形式，所需的选择器将为.a11y-bar：focus-within。 > .a11y-bar：焦点 - 焦点在焦点驻留在其中时选择.a11y-bar，这正是我们需要的。

好！
下面的链接演示了此示例：
>实例示例

进一步阅读

尽管我们已经涵盖了几乎需要了解的所有内容：focus，：focus-codis-com-cob-within，但从某些资源中进一步阅读仍然有价值：
>

使用CSS：可提供的焦点可提供键盘焦点指示 - WCAG 2.1技术

了解成功标准2.4.7：聚焦可见| Wai | W3C

9.3。输入焦点pseudo-class ：： focus - 选择器级别4 | W3C

9.4。焦点指示的伪级::: focus-disbible - 选择器级别4 | W3C

9.5。焦点容器伪级：： focus-within - 选择器级别4 | W3C

今天学习CSS

如果您是CSS中的新手，并且想很好地学习基础知识，请考虑CodeGuage的CSS课程。

以上是CSS中的焦点，焦点可见度和：焦点 - 焦点之间有什么区别？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn