:active就可以轻松实现
<style>
.content:active {
background-color: rgba(0, 0, 0, 0.2);
}
</style>
<p class="content">
The paragraph will get a gray background
</p>
印象中，:link一直是跟着a:link这么用的，其他html元素也能这么用么？答案是——不急，我们将答案揭晓稍作推迟，借此机会先来探究一下:active伪类的相关知识
起源
CSS Level 1中定义了一组伪类，叫Anchor pseudo-classes，:link、:visited和:active。
这三个伪类分别负责：链接的样式，链接被点过的样式，以及链接点按时的交互效果。规范明确指出，只有a标签可以使用这几个伪类：
In CSS1, anchor pseudo-classes have no effect on elements other than 'A'.
发展
随着网页技术的不断发展，人们意识到不光是链接需要交互反馈，其他网页元素也需要。于是，CSS Level 2规范将原先a标签的交互行为拆分出来，命名为dynamic pseudo-classes，包含三个伪类：原有的:active，新增的:hover、:focus。
:active负责在元素被“激活”时的交互效果，比如鼠标按键按下之后、松开之前。
:hover负责元素有（鼠标）指针划过时的交互效果
:focus负责元素获得焦点时的交互效果
作为Web开发者，我们需要注意的细节是，:link、:visited、:active、:hover的书写顺序不能错。对同一CSS属性进行操作，比如字体颜色color，那么书写顺序从先到后应该是:link :visited -> :hover -> :active。
道理很简单，根据CSS的优先级规范，同一元素、同一属性的样式，以最后声明的那个为准。试想，如果先写a:hover { color: yellow }，那a:link { color: red }就覆盖了color样式，那么即便鼠标指针划过，链接的字体颜色也不会变成黄色。
现在
CSS Level 3对这组伪类没有什么大的更新；CSS Level 4将这组伪类更名为Useraction Pseudo-classes，新增了:focus-visible和:focus-within，由于还在草案阶段，浏览器的兼容性还很差，我们就暂且不探究了。
答案
回过头来，看刚才的疑问
:link一直是跟着a:link这么用的，其他html元素也能这么用么？
答案已经明了，是可以。
意外
掏出iPhone试一试，咦？没有效果啊？
拿出Android手机再一试，咦？明明可以啊？
是我们遗漏了规范中的什么细节么？
并不是。
通过翻找 Safari的技术文档，我们会发现文档里有这么一句话：
On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the :active pseudo state is triggered only when there is a touch event set on the HTML element—for example, when ontouchstart is set on the element
因此，想要在iOS设备上，使用:active伪类实现点按交互效果，还需要最后一块拼图
<style>
.content:active {
background-color: rgba(0, 0, 0, 0.2);
}
</style>
<p ontouchstart="()=>{}" class="content">
The paragraph will get a gray background
</p>
