#书摘 #css #前端
《CSS 选择器世界》使用 :active 伪类实现点击反馈
:active 伪类可以用于设置元素激活状态的样式，可以通过点击鼠标主键或者用手指或者触控笔点击触摸屏触发激活状态。具体表现如下，按下触发:active伪类样式，抬起取消:active伪类样式的应用。:active伪类支持任意HTML元素，例如 <div>`、`<span> 等非控件元素，甚至是自定义元素。
然而，落地实现时:active伪类并没有理论上那么完美，表现为以下3点。
1. IE浏览器下:active样式的应用是无法冒泡的

img:active {
outline: 30px solid #ccc;
}
p:active {
background-color: teal;
}

<p><img src="1.jpg"></p>​​


此时，点击 <img> 元素的时候，在IE浏览器下，`<p>` 元素是不会触发:active伪类样式的，实际上祖先元素的:active样式也应当被应用；在Chrome和Firefox等浏览器下，其表现符合预期。

2. IE浏览器下，`<html>`、`<body>` 元素应用:active伪类设置背景色后，背景色是无法还原的。
具体来说，鼠标键按下时确实应用了:active设置的背景色，但是抬起后背景色没有还原，而且此时无论怎么点击鼠标，背景色都无法还原。这是一个很奇怪的bug，普通元素不会有此问题，这个问题甚至比在IE7浏览器下链接元素必须失焦才能取消:active样式还要糟糕。

3. 键盘访问无法触发:active伪类。例如，`<a>` 元素在focus状态下按下Enter键的事件行为与点击一致，但是，不会触发:active伪类。

4. 最后，:active伪类的主要作用是反馈点击交互，让用户知道他的点击行为已经成功触发，这对于按钮和链接元素是必不可少的，否则会有体验问题。由于:active伪类作用在按下的那一段时间，因此不适合用来实现复杂交互。

https://memo.cosine.ren/m/330
 
 
Back to Top