active伪类在PC端的作用为鼠标点击到放开时给元素添加样式用,呈现目标被点击的激活状态。
写法也很简单
/** 将a标签点击时的背景色改为红色 **/
a:active{
background-color: red;
}
但是直接在移动端这么写会发现没有效果。查找一番,在mozilla开发社区找到了结果。
<code>[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.</code>
需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。
document.body.addEventListener('touchstart', function (){}); //...空函数即可
将上述事件监听代码加上后,Safari Mobile上就可以看到按钮按下后的切换效果了。
参考文章:https://developer.mozilla.org/en-US/docs/Web/CSS/:active