18

假设我想在链接被访问后在链接旁边添加一个形状（如复选标记），而不是让它变成紫色，使用 a:after 和 a:visited。

我不确定是否应该选择这样的形状：

a:visited:after {

或像这样：

a:visited a:after

或者

a:visited :after {

（我对何时应该或不应该在伪元素之前添加空格也有点模糊，或者它甚至重要吗？）

或者可能是不同的东西？

现在我的CSS看起来像这样：

a:visited:after {
    /* check mark shape */
    content:'\00a0';
    color: black;
    position: relative;
    left:15px;
    display:inline-block;
    width: 3px;
    height: 6px;
    border: solid black;
    border-width: 0 2px 2px 0;  
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

来自http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/的复选标记形状代码

谢谢你的帮助。

4

1 回答 1

28

你应该a:visited:after像现在一样使用。它不起作用不是因为您的代码中的错误，而是因为问题在于伪类 - 由于隐私问题:visited，它不允许使用伪元素。

因此，基本上，您将无法仅将复选标记图标应用于访问过的链接。

关于这一点：

（我对何时应该或不应该在伪元素之前添加空格也有点模糊，或者它甚至重要吗？）

这很重要，因为空格代表后代组合器：

  1. 选择器a:visited a:after代表:afteran 的伪元素，a它是另一个a被访问链接的后代，这在 HTML 中不太有意义。

  2. 选择器a:visited :after类似于a:visited a:after，除了它代表:after的任何一种后代a:visited。

    可以改写为a:visited *:after。请参阅规范中的通用选择器。

通过省略空格，您将伪元素直接应用于它之前的选择器表示的元素，在您的情况下，它是a:visited，而不是它的任何后代。

于 2012-09-09T20:11:57.473 回答