Question

我无法找到一种方式a:visited，但只能找到属于.extern的方式。

a:visited.extern无法正常工作，a.extern:visited也没有用（我使用Mozilla Firefox 43.0.1 for Linux x86_64）

原因是我有一个小图标我想添加到.extern个链接，我想在访问该链接时更改其url()。

<style>
    a.extern {
        padding-right:1.3em;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: right center;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: 0.7em 0.7em;
        background-image: url("img/link.png");
    }

    a:visited:extern {
        background-image:url("img/link-visited.png");
    }

    a.extern:visited {
        background-image:url("img/link-visited.png");
    }
</style>

最后，此类型的所有访问链接都应受到影响

<a class="extern" href="http://etc.etc.etc">link</a>

Answer 1

基本上你想做的事情受到浏览器的限制，特别是Firefox。

Per MDN - Privacy and the :visited selector

您仍然可以对访问过的链接进行视觉样式设置，但现在可以使用哪些样式进行限制。只有以下属性可以应用于访问过的链接：


颜色

background-color

border-color（及其子属性）

outline-color

填充和描边属性的颜色部分

Answer 2

首先，我假设您的课程名称为extern，而不是.extern，因此您的a标记看起来像这样。

<a class="extern" href="http://etc.etc.etc">link</a>

要仅设置具有extern类的已访问链接的样式：

a.extern:visited {
    background-image:url("img/link-visited.png");
}

注意最后添加:visited选择器的方式：a.extern:visited。

Answer 3

更改

<a class=".extern" href="http://etc.etc.etc">link</a>

到

<a class="extern" href="http://etc.etc.etc">link</a>

和

<style>
    a.extern {
        padding-right:1.3em;
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: right center;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: 0.7em 0.7em;
        background-image: url("img/link.png");
    }

    a:visited:extern {
        background-image:url("img/link-visited.png");
    }

    a.extern:visited {
        background-image:url("img/link-visited.png");
    }
</style>

下面的代码块不需要

a:visited:extern {
    background-image:url("img/link-visited.png");
}

样式访问属于类的链接

3 个答案: