手机端 css点击的样式

在移动端的CSS中，给按钮或链接添加点击样式通常是为了提升用户体验和视觉反馈。你可以通过以下几种方法来实现点击状态的变化：

1. **伪类`:active**：
- 使用`:active`伪类来模拟元素被按下时的效果，比如增加边框宽度、阴影或者改变背景色。例如：

   button:active {
     background-color: #ccc;
     box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
   }

2. **状态类**: 可以创建一个新的CSS类，如`.is-clicked`，并在事件触发时动态添加或删除它：

   .is-clicked {
     background-color: #ff0; /* 点击后颜色 */
     border: none;
   }
   button.is-clicked {
     cursor: pointer;
   }

JavaScript:

   document.getElementById('myButton').addEventListener('click', function() {
     this.classList.add('is-clicked');
   });

3. **使用`pointer-events`属性**：为了防止点击区域失效，可以临时禁用元素的点击，如`pointer-events: none`，然后在`:active`状态时恢复：

   button {
     pointer-events: none;
   }
   button:active {
     pointer-events: auto;
     background-color: #ff0;
   }

4. **过渡动画**：可以加入过渡效果，使颜色变化更平滑，如`transition`属性：

   button {
     background-color: #fff;
     transition: background-color 0.2s;
   }
   button:active {
     background-color: #ff0;
   }