：活动伪类不能在移动Safari浏览器中工作
在iPhone / iPad / iPod上的Webkit中，当点击元素时，不会触发为<a>标记指定样式：激活的伪类。 我怎样才能触发？ 示例代码：
<style> a:active { background-color: red; } </style> <!-- snip --> <a href="#">Click me</a>
<body ontouchstart=""> ... </body>
只应用一次，而不是每个button元素似乎修复页面上的所有button。 或者，你可以使用这个小JS库“ Fastclick ”。 它加快了触摸设备上的点击事件，并照顾到这个问题。
在<a>标签中添加ontouchstart的事件处理程序。 这导致CSS奇迹般地工作。
<a ontouchstart="">Click me</a>
正如其他答案所述，iOS Safari不会触发:active pesudo-class，除非触摸事件附加到元素上，但到目前为止，这种行为是“神奇的”。 我在Safari Developer Library上遇到了这个小问题，解释了它（重点是我）：
您还可以将
-webkit-tap-highlight-colorCSS属性与设置触摸事件一起使用，以将buttonconfiguration为与桌面类似。 在iOS上，鼠标事件发送速度非常快，从而不会收到closures或活动状态。 因此，只有在HTML元素上设置了触摸事件时，才会触发:active伪状态 – 例如，如果在元素上设置了ontouchstart，则如下所示：<button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);"> Testing Touch on iOS </button>现在，当iOS上轻按button时，button将变为指定的颜色，而不会出现周围的透明灰色。
换句话说，设置一个ontouchstart事件（即使它是空的）明确地告诉浏览器对触摸事件作出反应。
在我看来，这是有缺陷的行为，可能要追溯到“移动”网页基本不存在的时候（查看链接页面上的截图以了解我的意思），而且一切都是以鼠标为导向的。 有趣的是，其他更新的移动浏览器，比如Android，在触摸屏上显示'：active'伪状态就好了，没有像iOS所需要的任何窍门。
（注意：如果你想在iOS上使用你自己的自定义样式，你也可以通过使用-webkit-tap-highlight-color CSS来禁用iOS使用的默认灰色半透明框来代替:active伪状态财产，如上面相同的链接页面所解释的。）
经过一番实验，在<body>元素上设置一个ontouchstart事件的预期解决scheme，那么所有的触摸事件都会冒泡到不了。 如果元素在页面加载时在视口中可见，那么它可以正常工作，但向下滚动并轻击视口外的元素不会触发:active伪状态。 所以，而不是
<!DOCTYPE html> <html><body ontouchstart></body></html>
将事件附加到所有元素，而不是依赖于冒泡到正文的事件（使用jQuery）：
$('body *').on('touchstart', function (){});
但是，我不知道这个性能影响，所以要小心。
编辑：这个解决scheme有一个严重的缺陷：即使触摸一个元素，而滚动页面将激活:active伪状态。 敏感度太强。 Android通过在显示状态之前引入一个非常小的延迟来解决这个问题，如果页面被滚动，取消它。 鉴于此，我build议只在选定的元素上使用它。 在我的情况下，我正在开发一个Web应用程序，在这个领域中使用，基本上是一个button的列表来导航页面并提交操作。 因为在某些情况下，整个页面是非常多的button，这不适合我。 但是，您可以将:hover伪状态设置为填充此状态。 禁用默认的灰色框后，这完美的作品。
你是使用所有的伪类还是只使用一个？ 如果您至less使用了两个，请确保它们按正确的顺序排列，否则它们都会中断：
a:link a:visited a:hover a:active
..以该顺序。 此外，如果您只是使用：主动，添加：链接，即使你不是样式。
//hover for ios -webkit-tap-highlight-color: #ccc;
这适用于我，添加到你想突出显示的元素的CSS
截至2016年12月8日，在Safari 10（iPhone 5s）上，我接受的答案（ <body ontouchstart="">...</body> ）不适用于我：只适用于那些可见的元素页面加载。
但是，增加：
<script type='application/javascript'> document.addEventListener("touchstart", function() {}, false); </script>
到head按我想要的方式工作，缺点是在滚动期间所有触摸事件都会触发被触摸元素上的:active伪状态。 （如果这对您来说是个问题，您可以考虑使用FighterJet :hover解决方法。）
这适用于我：
document.addEventListener("touchstart", function() {},false);
注意：如果你这样做，它也值得移除默认的龙头高亮颜色手机Safari使用以下CSS规则应用。
html { -webkit-tap-highlight-color: rgba(0,0,0,0); }
我已经发布了一个应该为你解决这个问题的工具。
表面上问题看起来很简单，但实际上，触摸和点击行为需要进行相当广泛的定制，包括超时function以及诸如“当您滚动链接列表时会发生什么事情”或“当您按下链接时会发生什么事情”将鼠标/手指远离活动区域“
这应该立即解决： https : //www.npmjs.com/package/active-touch
您需要将您的：主动样式分配给.active类或select您自己的类名称。 默认情况下，这个脚本可以和所有的链接元素一起工作，但是你可以用你自己的select器来覆盖它。
诚实，有用的反馈和贡献非常感谢！
没有100％涉及到这个问题，但你可以使用CSS兄弟破解来实现这一点
HTML
<input tabindex="0" type="checkbox" id="145"/> <label for="145"> info</label> <span> sea</span>
SCSS
input { &:checked + label { background-color: red; } }
如果你想使用纯html / css工具提示
span { display: none; } input { &:checked ~ span { display: block; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> a{color: red;} a:hover{color: blue;} </style> </head> <body> <div class="main" role="main"> <a href="#">Hover</a> </div> </body> </html>
