Question

在下面的代码中，我想禁用＆＃34; a：active＆＃34; （A）位置的颜色样式。有没有好办法呢？

<!DOCTYPE html>
<html>
<head>
    <style>
        a{ background-color: #000; }
        a.foo{ background-color: #0f0; }
        a.bar{ background-color: #00f; }
        a:active{ background-color: #f00; }
        /*
            (A) I want to cancel :active color here.
        */
    </style>
</head>
<body>
    <a href="#">hoge</a>
    <a href="#" class="foo">foo</a>
    <a href="#" class="bar">bar</a>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
<head>
    <style>
        a{ color: #000; }
        a.foo{ background-color: #0f0; }
        a.bar{ background-color: #00f; }
        a.foo:active, a.bar:active{ background-color: #f00; }
        /*
            (A) I want to cancel :active color here.
        */
    </style>
</head>
<body>
    <a href="#">hoge</a>
    <a href="#" class="foo">foo</a>
    <a href="#" class="bar">bar</a>
</body>
</html>

Answer 2

您无法移除属性，因此您只能覆盖它。

a.foo, a.foo:active{ background-color: #0f0; }
a.bar, a.bar:active{ background-color: #00f; }

正在取消：活动链接css属性

2 个答案: