按钮和链接的":焦点"伪元素的样式对触摸设备有意义吗

Question

我支持，对于:hover，功率肯定是"否"；。在CSS语言上，它将是

@media (hover: hover) {
.button {
outline: 1px solid yellow;
}
}  

:focus呢？我知道即使在触摸设备上输入文件也需要它，但按钮和链接呢？

Answer 1

：焦点当然适用于触摸或非触摸设备上的按钮和链接/锚点。

试试下面的例子。当您单击/点击按钮或链接时，样式会发生变化，直到您在其他地方单击/点击。

.button:focus,
.link:focus{
color: red;
}

<button class="button">
Click me
</button>
<br/>
<a href="#" class="link">Link</a>

更新

为了回答您在评论中的问题，:focus与:hover不同，它不一定与可访问性有关。这些伪类指示元素的状态。

• :focus-表示已接收焦点的元素(例如表单输入(。它通常在用户单击或轻击某个元素或使用键盘的Tab键选择该元素时触发
• :hover-当用户使用定点设备与元素交互，但不一定要激活它时。它通常在用户用光标(鼠标指针(悬停在元素上时触发

还有:active，它在某种程度上是相关的：

• :active-表示用户正在激活的元素(如按钮(。当使用鼠标时；激活"；通常在用户按下主鼠标按钮时开始

因此，您可以根据这些不同的状态设置元素的样式。但如果你的设计不需要特定的州风格，你就不必这样做。

根据元素的不同，还有其他可用的伪类，如仅用于链接/锚点的:visited和特定于复选框和单选按钮的:checked。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Answer 2

有意义：

1. 您在触摸过程中会看到它一小段时间
2. 如果您的页面停止操作，并且用户仍停留在按钮或链接上，他们将看到：焦点样式(如果已定义(
3. 如果无论如何都应该为桌面定义它(有关可访问性(，请参阅https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html你可能会在桌面和触摸设备之间共享风格