html - :active is not working while a:hover is working well

Question

a:hover { 
    color: #237ca8 !important; 
    font-weight: bold;
}
a:active {
    color: #cccccc !important; 
    font-weight: bold;
}

上面是我的css，HTMl是

<div class="services">
    <h2>Request a Quote</h2>
    <ul class="contact">                
        <li>
            <a href="forms/request-quote2.php">
                Warehousing & Inventory Management
            </a>
        </li>
        <li>
            <a href="forms/request-quote3.php">
                Last Mile Transportation
            </a>
        </li>
    </ul>
</div>

悬停链接工作正常，但我以不同的方式尝试了很多次，但这段代码根本不起作用。

我希望如果我点击第三个链接，那么第三个链接将采用不同的颜色，其他不活动的链接意味着当前链接的不同颜色是打开的。

Answer 1

悬停和事件的样式相同。因此，除非按照 Quentin 评论中提到的方式进行操作，否则您无法区分 active 是否有效。如果您更改悬停或事件的颜色或任何样式，您会发现它工作正常。演示:http://jsfiddle.net/lotusgodkk/GCu2D/87/

a:hover{ color:#237ca8  !important; font-weight:bold;}
a:active{color:red !important; font-weight:bold;}