手机端css 点击变色

在移动设备上，想要实现一个点击某个元素，该元素变色的效果，可以使用CSS3的伪类选择器:active。

样式示例：button:active {
    background-color: red;
}
div:active {
    color: blue;
}

这个伪类选择器会在用户点击元素的瞬间生效，从而实现点击变色的效果。

需要注意的是，:active样式会在用户松开点击时取消，如果想要保持变色的效果需要使用其他方式，如JavaScript来添加类名来实现。

此外，有些移动设备还会有一个:touch-start伪类选择器，在用户碰触屏幕时就生效，但是这个伪类在很多浏览器上并不支持，建议使用:active伪类。

样式示例：button:active, button.active {
    background-color: red;
}

使用JavaScript实现的方式示例：

HTML:Click Me!CSS:.click-me.clicked {
    background-color: red;
}
    JavaScript:var button = document.querySelector('.click-me');
button.addEventListener('click', function() {
    this.classList.toggle('clicked');
}
    );
    

以上代码中，JavaScript获取了点击元素的引用，然后给它添加了一个事件监听，当用户点击时就会切换类名，CSS中的类名为.clicked的元素会有特定的样式。

尽管JavaScript实现的方式更加灵活，但是使用:active伪类选择器来实现点击变色的效果是比较简单和高效的方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！