如何解决：CSS 选择器“:active”不起作用？答案

【问题标题】：How to solving : CSS selector “:active” not working?如何解决：CSS 选择器“:active”不起作用？
【发布时间】：2012-07-20 06:37:12
【问题描述】：

我很困惑，因为 :hover 选择器工作正常，但 :active 不工作。

场景：

首先：sample.com/game 当点击不同ID（例如：ID 1-101）的链接框游戏时，每个框都使用css

#selec{background-color:white;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}

当点击其中一个框 ID 时，转到 sample.com/game?id=100

我成功悬停

#selec:hover{background-color:blue;}

但我想用彩色背景激活，当框处于活动状态时（框 ID 100，红色背景和其他仍然白色，因为框 100 处于活动状态）

#selec:active{background-color:blue;}

但是没有成功，为什么？？？？？？我仍然对此感到困惑。

这个 php 文件：

<a href="?game=<?php echo $ID;?>"><div id="selec"><div class="text"><p><?php echo $text; ?></p></div></div></a>

有人帮我解决这个问题吗？谢谢 *$text 用于在框中输入名称，例如框 ID 100 是游戏 RPG

【问题讨论】：

标签： css css-selectors hover

【解决方案1】：

:active CSS 伪类适用于所有元素...然而如果您不在 Internet 中以 标准模式呈现，它仅适用于链接（例如 <a> 元素）探索者。

因此，如果您没有设置 DOCTYPE，它将不适用于 IE 中的 <div>。

将此添加到 HTML 的顶部：

<!doctype html>

每个伪类的定义顺序也很重要...（以确保它们都“覆盖”前一个）...请记住：

"Lord Vadar 的 Handle Formerly Anakin"

a:link    {color:blue;}
a:visited {color:green;}
a:hover   {color:red;}
a:focus   {color:orange;}
a:active  {color:yellow;}

注意：感谢@BoltClock 在此处的 W3Schools 网站上指出错误http://www.w3schools.com/cssref/sel_active.asp，这表明它仅在链接上可用。（这在现代浏览器中不再正确（以标准模式呈现））

注意 2：W3C 表示 :active 伪类已添加到 CSS 2.1 中的所有元素中，它仅在 CSS 1.0 中的链接上： “注意。还要注意，在 CSS1 中，':active' 伪类仅适用于链接。” http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

【讨论】：

:active 未指定仅适用于 a 元素，或仅适用于“链接”。不知道 W3Schools 是从哪里得出这个想法的。
@scunliffe：感谢您的回复。但它没有影响。还有什么想法？？？
@BoltClock 你是对的。现代浏览器确实在所有元素上都支持它（尽管我正在更新答案）
啊，是的，CSS1。那么，他们（W3Schools）真的应该更新那个页面。