是否有 JS click 的 CSS 替代品（因为 :hover 是 mouseover / mouseout 的替代品）？

Question

更新：感谢 Crowes 和 Boltclock 下面的解释，我现在对 CSS 伪类明确地静态有了更清晰的理解（即描述元素的状态）当下）。

虽然 javascript 事件存在时间维度，但 CSS 伪类则相反，当前为真或假。

因此，与表面上类似的 javascript 事件不同，CSS 伪类不会（也不能）引用用户之前与该元素的交互。

这使我的问题在很大程度上是多余的。

---

在 2017 年，令人惊讶的是，尽管 CSS 已经拥有 :hover 几十年了，但它仍然缺乏伪类最明显的补充 - :click。

我搜索了 Stackoverflow，并在 2012 年 11 月的这个问题中：

Can I have an onclick effect in CSS?

评分最高的答案：

使用:active

不是onclick 的一个很好的替代品——如果有的话:active 实际上是onmousedown 的替代品。

评分第二高的答案 -

使用复选框技巧

不是语义化的（而且......随着黑客的发展，感觉很hacky）。

所以。 javascript 的onclick 是否有最小的纯 CSS 替换？

Answer 1

是否有最小的努力纯 CSS 替换 javascript 的 onclick?

是的，有一种直接使用 CSS 实现 onclick 行为的简单方法。

两步：

1. 将tabindex="0" 添加到需要onclick 行为的元素中
2. 使用:focus 伪元素激活onclick 行为

示例：

p {
width: 100px;
height: 100px;
margin: 0;
line-height: 100px;
font-size: 16px;
text-align:center;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
font-weight: bold;
cursor: pointer;
transform: rotateY(0deg);
transition:
    width 1s ease-out,
    font-size 1s ease-out,
    line-height 2s ease-out,
    height 1s ease-out 1s,
    transform 1s ease-out 2s;
}

p::after {
content:' Me';
}

p:focus {
width: 300px;
height: 200px;
line-height: 200px;
font-size: 36px;
transform: rotateY(360deg);
}

p:focus::after {
content:' Elsewhere';
}

<p tabindex="0">Click</p>