单击后CSS更改按钮样式

Question

我想知道是否有一种方法可以在单击按钮后在 css 中更改按钮的样式，所以不是 element:active 。

原文由 JohnyNich 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您正在寻找纯 css 选项，请尝试使用 :focus 伪类。

 #style  {
    background-color: red;
}

#style:focus {
    background-color:yellow;
}

原文由 Rich 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Each link has five different states: link , hover , active , focus and visited .

Link is the normal appearance, hover is when you mouse over, active is the state when it’s clicked, focus follows active and visited 是当您取消对最近单击的链接的关注时最终的状态。

我猜您想在 focus 或 visited 上实现不同的样式，然后您可以添加以下 CSS：

 a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }

在您的 CSS 中推荐的不会造成任何问题的顺序如下：

 a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }

您可以使用网络浏览器的开发人员工具来强制元素的状态，如下所示（Chrome->Developer Tools/Inspect Element->Style->Filter :hov）： Force state in Chrome Developer Tools

原文由 MrD 发布，翻译遵循 CC BY-SA 4.0 许可协议