iPhone CSS：焦点不起作用答案

【问题标题】：iPhone CSS :focus not workingiPhone CSS：焦点不起作用
【发布时间】：2015-09-20 11:59:30
【问题描述】：

我已经简化了:focus 伪类的测试。这是 HTML：

<span id="test" tabindex="1">Hello</span>

和 CSS：

span#test:focus {
    color: red;
}

当我单击桌面上的跨度时，它按预期工作（将颜色更改为红色）。但是，当我在 iPhone 上触摸它时，它不会。

如果将:focus 更改为:hover，我可以让它工作，但我不希望桌面版本这样，因为我希望它等到用户点击。

我可能不得不求助于 JavaScript，但是有 CSS 解决方案吗？

谢谢

【问题讨论】：

:focus 通常用于<a>、<button>、<input> 和 <textarea>，几乎所有您可以通过 访问的交互元素在页面中切换。对我来说，它也可用于任意元素（如 <p>、<span> 或 <div>），这对我来说很新鲜。
@connexo 在桌面上，它可以用在任何元素上，只要你让它具有焦点，比如tabindex 属性。这些元素也可以添加标签，尽管它并不总是很漂亮。

【解决方案1】：

假设 iphone 的宽度为 320 像素或更高，具体取决于型号，peharps 媒体查询可以作为替代解决方案：

span#test:focus {
   color: red;
}

@media (max-width: 320px) {
   span#test:hover {
      color: red;
   }
}

【讨论】：