html 元素中是否有相当于 onclick 的 css？

Question

在 javascript 中，您可以直接从 html 元素轻松执行 onclick 事件：

<div onclick="..javascript here.."></div>

我知道您可以使用 < style > 标签更改 css 样式，但我想知道您是否能够像下面的示例一样执行它：

<div onclick="..css here.."></div>

Answer 1

如果你想纯粹通过css你必须使用:active或者也许来做到这一点:focus：

div:hover  { color: red; }  /* mouse-over */
div:active { color: red; }  /* mouse-down (this cause also focus) */
input:focus{ color: red; }  /* got focus (by tab key or mouse-down) */

/* for <a> element: */
a:link    { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */

注意：对于不获得焦点的元素（如 div），在用户释放鼠标按钮后，不会:active保持永久状态，但它适用于文本输入或按钮等元素。有一个名为“Checkbox Hack”的解决方法，您可以使用连接的标签和复选框输入以及您尝试控制的其他一些元素。

另外，如果你想更改 css 类或内联样式，你可以执行以下操作：

div:hover  { color: red; }  /* mouse-over */
div:active { color: red; }  /* mouse-down (this cause also focus) */
input:focus{ color: red; }  /* got focus (by tab key or mouse-down) */

/* for <a> element: */
a:link    { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */