如何解决：CSS 选择器“:active”不起作用？
Posted
技术标签:
【中文标题】如何解决：CSS 选择器“:active”不起作用？【英文标题】：How to solving : CSS selector “:active” not working? 【发布时间】：2012-07-20 06:37:12 【问题描述】：我很困惑，因为 :hover 选择器工作正常，但 :active 不工作。
场景：
首先：sample.com/game 当点击不同ID（例如：ID 1-101）的链接框游戏时，每个框都使用css
#selecbackground-color:white;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;
当点击其中一个框 ID 时，转到 sample.com/game?id=100
我成功悬停
#selec:hoverbackground-color:blue;
但我想用彩色背景激活，当框处于活动状态时（框 ID 100，红色背景和其他仍然白色，因为框 100 处于活动状态）
#selec:activebackground-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
【问题讨论】：
【参考方案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/cs-s-ref/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）真的应该更新那个页面。以上是关于如何解决：CSS 选择器“:active”不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
为啥这个 CSS 选择器不起作用：a:hover ~ span？
为啥我的 jQuery :not() 选择器在 CSS 中不起作用？