:focus on links 在我的网站的移动版本上不起作用答案

【问题标题】：:focus on links is not working on mobile version of my website:focus on links 在我的网站的移动版本上不起作用
【发布时间】：2021-01-23 23:22:03
【问题描述】：

我的网站的移动版本上有一个窗帘菜单，我希望它的链接在点击时从白色变为绿色。为此，我使用 :focus on CSS 上的元素，甚至尝试将 tabindex="1" 添加到 HTML 中，但发生的情况如下：当我使用检查工具在笔记本电脑上测试移动版本时链接实际上具有所需的焦点效果；但是，当我在实际的手机上进行测试时，什么都没有发生 - 链接只是保持原来的白色。

有人可以根据我在下面留下的代码提供帮助吗？这听起来应该很容易解决，但我已经尝试了网络上建议的无数解决方案，但到目前为止都没有奏效:(提前致谢！

body {
  background-color: black;
}

.overlay a {
  color: white;
}

.overlay a[tabindex]:focus {
  color: green;
  outline: none;
}

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a tabindex="1" href="#">Home</a>
    <a tabindex="1" href="#">About</a>
    <a tabindex="1" href="#">Contact</a>
    <a tabindex="1" href="#">CV</a>
  </div>
</div>

【问题讨论】：

:focus 不是链接选择器。链接选择器是:visited、:hover 和:active。嵌套css也不起作用。你需要 SASS 作为例子。
谢谢你，@tacoshy - 我也试过 :active 但由于某种原因在生产中似乎也没有工作（虽然它在本地工作）。有什么建议吗？
您到底想达到什么目的？如果它在本地工作，那么它应该可以正常工作。您是否已经清除了浏览器缓存？您是否确保在 webspace 上加载了正确的 css？
我刚刚意识到移动设备上的伪类可以在 Mozilla 上运行，但不能在 Chrome 或 Safari 上运行。我在我的 CSS 规则之前添加了 -webkit-，但它仍然不起作用。任何进一步的提示？谢谢！

标签： css mobile focus pseudo-class

【解决方案1】：

在您的情况下，:active 应该可以在移动设备中使用。 :focus 用于input 标签。

【讨论】：

谢谢你，@David - 我也试过 :active 但由于某种原因似乎也不起作用