将a：visited与a：after或者伪类与伪元素链接在一起 [英] Combine a:visited with a:after, or chaining pseudo-classes with pseudo-elements

问题描述

假设我想在访问过的链接旁边添加一个形状（如复选标记），而不是使其变为紫色，而使用：after和a：visited。

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

  a：visited：在{
  

或类似之后：

  a：visited a：after 
  

或

  a：visited：after {
  

（当我应该或者不应该在伪元素之前添加一个空格，或者它甚至是重要的时候，我还有点模糊不清？）

或者可能有些不同？

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

  a：visited ：之后{
 / *复选标记形状* / 
内容：'\00a0'; 
颜色：黑色; 
职位：亲属; 
 left：15px; 
 display：inline-block; 
 width：3px; 
 height：6px; 
边框：纯黑色; 
 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

解决方案

/ div>

您应该像现在一样使用 a：visited：在之后。它不会工作不是因为你的代码有错误，而是因为问题在于：visited 伪类 - 它不允许使用伪代码，因为隐私问题。

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

关于此问题：

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

它确实很重要，因为空间代表了后代组合子：

1. 选择符 a：visited <：代表之后：一个 a 的伪元素，它是另一个 a 的后代，这是一个访问过的链接，它在HTML不太合理。




2. 之后的选择符 a：visited：与 a：visited a：after 类似，但它代表<$ c $



   它可以重写为 a：visited *：在之后。请参阅规范中的通用选择器。




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

Let's say I wanted to add a shape (like a checkmark) next to a link after it has been visited, instead of having it just turn purple, using a:after along with a:visited.

I'm unsure if I should select the shape like this:

a:visited:after {

or like this:

a:visited a:after

or

a:visited :after {

(i'm also a bit fuzzy on when I should or shouldn't add a space before a pseudo-element, or does it even matter?)

or perhaps something different?

Right now my css looks like this:

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);
}

check mark shape code from http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/

Thanks for any help.

解决方案

You're supposed to use a:visited:after as you're currently doing. It doesn't work not because of an error in your code, but because the issue lies in the :visited pseudo-class — it doesn't permit the use of pseudo-elements because of privacy concerns.

So basically, you won't be able to apply your checkmark icon to visited links only.

Regarding this:

(i'm also a bit fuzzy on when I should or shouldn't add a space before a pseudo-element, or does it even matter?)

It does matter, because the space represents a descendant combinator:

1. The selector a:visited a:after represents the :after pseudo-element of an a that is a descendant of another a which is a visited link, which in HTML doesn't quite make sense.

2. The selector a:visited :after is similar to a:visited a:after, except it represents :after of any kind of descendant of a:visited.

   It can be rewritten as a:visited *:after. See the universal selector in the spec.

By omitting the space, you're applying the pseudo-element directly to the element represented by the selector before it, which in your case is a:visited, not any of its descendants.

这篇关于将a：visited与a：after或者伪类与伪元素链接在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！