让你的:active好好工作

在某些版本的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

JS Bin on jsbin.com