html – 组合a:访问与a:之后,或链接伪类与伪元素

前端之家收集整理的这篇文章主要介绍了html – 组合a:访问与a:之后,或链接伪类与伪元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
假设我想在链接访问之后添加一个形状(如一个复选标记),而不是将其变成紫色,使用a:后跟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/

感谢任何帮助.

解决方法

你应该使用a:visited:after,你正在做的.它不起作用,因为你的代码错误,但是因为问题在于:访问的伪类 – 它不允许使用伪元素,因为 privacy concerns.

所以基本上,您将无法将您的复选标记图标应用于访问链接.

关于这个:

(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?)

这是重要的,因为空间代表后代组合器:

>选择器a:访问a:after表示:后面的伪元素a是作为被访问链接的另一个的后代,在HTML中是不合适的.
>选择者a:访问:之后类似于a:访问a:之后,除了它代表:之后的任何一种后代a:访问.

它可以重写为:访问*:之后.参见the universal selector规格.

通过省略空格,您将伪元素直接应用于由选择器表示的元素,在您的情况下,它是一个访问的,而不是其后代.

原文链接:https://www.f2er.com/html/229928.html

猜你在找的HTML相关文章