在CSS或Sass中,我可以为所有伪选择器应用样式吗?

21

是否可以使用CSS或Sass将样式应用于锚点的所有伪选择器?

例如:

a:* {
    color: #900;  
}

代替

a {
    &:hover, &:link, &:active, &:visited {
        color: #900; 
    } 
}
我只想重置标准样式。在CSS中,通配符可以用于将样式应用于所有元素...但是如何应用于所有伪选择器?

1
没有通用的伪类选择器或类似的东西。如果有的话,它将匹配不仅您的四个链接伪类,还包括在CSS中定义的其他所有内容,这并没有任何意义。 - BoltClock
2个回答

16

简短回答: 不可以直接实现


然而,可以使用mixin来达到类似的效果。

// Sets the style only for pseudo selectors
@mixin setLinkSelectorStyle {
  &:hover, &:link, &:active, &:visited {
        @content;
    }
}

// Sets the style to pseudo selectors AND base default anchor
@mixin setLinkStyleAll {
  &, &:hover, &:link, &:active, &:visited {
        @content;
    }
}

a {
  color:red;
  @include setLinkSelectorStyle {
    color:gold;
  }
}

a.specialLink {
  @include setLinkStyleAll {
    color:purple;
  }
}

[Example using http://sassmeister.com/ compiled SASS]

a {
  color: red;
}
a:hover, a:link, a:active, a:visited {
  color: gold;
}

a.specialLink, a.specialLink:hover, a.specialLink:link, a.specialLink:active, a.specialLink:visited {
  color: purple;
}
<a>Normal anchor, No href (:link won't work, but other selectors will)</a>
<hr />
<a href="#">Normal anchor</a>
<hr />
<a class="specialLink">Specific class (no href)</a>
<hr />
<a class="specialLink" href="#">Specific class</a>

混合器将在将混合器包含在锚点/类上时为所有伪选择器创建规则。
已删除旧答案,请查看历史记录。

我只想为几个链接状态应用一种颜色。你的解决方案正是我所寻找的。 - Vladimir
这可能是你需要的,但它并没有回答问题。 - Gustavo Siqueira
@GustavoSiqueira 我的了解是不行的,正如我在答案顶部和稍微末尾处所说的那样。因此,我只是提供了一种曾经使用过并希望能帮助其他人的替代方案。 - Fewfre
更新了答案,希望现在能够“回答”问题,而不是提供一个非常糟糕的hack。 - Fewfre

1

U can do it like that:

  &:before, &:after {
      content: 'a';
  }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接