结合a:访问a:after,或用伪元素链接伪类

Question

假设我想在链接访问后在链接旁边添加一个形状(如复选标记),而不是让它变成紫色,使用: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/

谢谢你的帮助.

Answer 1

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

基本上,您将无法仅将选中标记图标应用于访问过的链接.

关于这个:

(当我应该或不应该在伪元素之前添加空格时,我也有点模糊,或者甚至是否重要？)

这很重要,因为空间代表了一个后代组合子:

1. 选择器a:visited a:after表示一个:after伪元素,a它是另一个的后代,a它是一个访问过的链接,在HTML中没有多大意义.

2. 选择a:visited :after类似a:visited a:after,但它代表:after的任何形式的后裔a:visited.

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

通过省略空格,您将伪元素直接应用于选择器所代表的元素,在您的情况下a:visited,它不是任何后代.