h5 开发 webapp 各种按钮，为了更友好地展示交互效果，需要添加一些点击效果，在 pc 端的元素用 :focus，:hover，:active 等伪元素来实现，超链接元素还有 :link，:visited。

很重要的一点是，由于 css 的规则，优先级相同的样式后面会覆盖前面的，所以伪类顺序很重要，一般是

(:link 或者:visited) ~ :focus ~ :hover ~ :active

safari 和 chorme 会有突出颜色显示，可以用 -webkit-tap-highlight-color 来取消

.btn {
  -webkit-tap-highlight-color: transparent;
}

windows phone 的 ie 可以用 meta 标签来实现触摸取消这种效果

<meta name="msapplication-tap-highlight" content="no" />

火狐有一个 -moz-focus-inner 伪类，在触摸元素添加一个轮廓，可以设置 border: 0 移除

在 button 元素会对元素应用渐变，可以通过 background-image: none 移除

.btn {
  background-image: none;
}
.btn::-moz-focus-inner {
  border: 0;
}

在移动端的浏览器上，android 的按下效果可以用 :active 或者 :hover 伪元素来实现，而在 ios 上，可以通过 js 为元素添加 touchstart 事件来解决这个问题

window.onload = function () {
  if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
    document.body.addEventListener('touchstart', function () {}, false);
  }
};

替代方案是向页面中的所有可交互元素添加触摸开始侦听器，从而缓解部分性能问题。

window.onload = function () {
  if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
    var elements = document.querySelectorAll('button');
    var emptyFunction = function () {};
    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('touchstart', emptyFunction, false);
    }
  }
};