所选链接不保留颜色

Question

我有一个<a href>链接:

<table class='hello'>
    <tr>
        <td><a href = 'javascript:void(0);' onClick=window.open('helloworld.php')></a></td>
    </tr>
</table>

我尝试过的CSS(没有工作):

.hello tr td a.selected {
    color: #F2F2F2;
}

和

.hello tr td a:visited {
    color: #F2F2F2;
}

我知道层次结构:.hello tr td a.是正确的，如下所示:

.hello tr td a:hover {
    color: #F2F2F2;
}

当我选择链接时，一个弹出窗口打开，但是，我希望原始页面上的链接被突出显示(因此，如果用户返回到原始页面，他/她将知道被选中了什么)。

然而，我只能让:active和:hover工作。

.selected或:visited不工作的原因

Answer 1

问题不在于你的CSS。这是href目标。如果你输入href='javascript:...'，超链接将永远不会被认为访问过，因此颜色将永远不会改变。

改变你的<a>标签为:

<a href='helloworld.php'>Hello world</a>

onclick处理程序是不必要的。

编辑:

OP澄清了目标必须以弹出式打开，带参数，不要使用表单。

要使它成为一个弹出，添加target='_blank'。根据需要修改href以传递所需的参数。

<a href='helloworld.php?param1=goodbye&param2=world' target='_blank'>Hello world</a>

Answer 2

使用href = 'javascript:void(0);'会导致你的问题。

:visited选择器依赖于href属性来判断链接是否已被访问。此外，.selected是一个类，所以除非你在点击它之后将它添加到链接中，否则它将不适用。

查看DEMO

另外，CSS中样式的顺序也很重要:

a:visited { ... }
a:hover { ... }   // if active is not after hover, the hover style
a:active { ... }  // will override the active style during mousedown

参考:css技巧