将 a:visited 与 a:after 结合使用，或者将伪类与伪元素链接起来

Question

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

我

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

a:visited:after {

或者像这样：

a:visited a:after

或

a:visited :after {

(我也有点不清楚什么时候应该或不应该在伪元素之前添加一个空格，或者这是否重要？

或者也许有什么不同的东西？

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

a:visited:after {
    /* check mark shape */
    content:'0a0';
    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表示a的:after伪元素，该元素是另一个a的后代，该是一个访问过的链接，这在HTML中不太有意义。

2. 选择器a:visited :after与a:visited a:after相似，只不过它表示a:visited任何种类的后代:after。

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

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