在某些版本的safari上，：active伪类不生效，可以通过css和js两种方式hack一下：
html
<div class="button">
点击时我应该变红
</div>
css
.button{
display:block;
width:200px;
height:40px;
margin-top:10px;
border-radius:6px;
border:1px solid #ccc;
line-height:40px;
text-align:center;
}
.button:active,
.button.active // this is for js hack
{
background-color:red;
cursor:pointer;/*mind add this line to make your work easy*/
}
javascript
document.addEventListener('DOMContentLoaded',function(){
//we will add the .active class the elements which has a .button class
document.body.addEventListener('touchstart',function(eve) {
if(eve.target.classList.contains('button'))
{
eve.target.classList.add('active');
}
});
//remove the .active when you finish the touch event
document.body.addEventListener('touchend',function(eve) {
if(eve.target.classList.contains('button'))
{
eve.target.classList.remove('active');
}
});
});
online demo