我可以将样式应用于 CSS 或 Sass 中的所有伪选择器吗?

Posted

技术标签:

【中文标题】我可以将样式应用于 CSS 或 Sass 中的所有伪选择器吗?【英文标题】:Can I apply a style to all pseudo selectors in CSS or Sass? 【发布时间】:2012-07-02 17:58:30 【问题描述】:

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

类似

a:* 
    color: #900;  

而不是

a 
    &:hover, &:link, &:active, &:visited 
        color: #900; 
     

我只想重置标准样式。在 CSS 中,通配符可用于将样式应用于所有元素......但是所有伪选择器如何?

【问题讨论】:

没有通用的伪类选择器或类似的东西。如果有,它不仅会匹配您的四个链接伪类,还会匹配 CSS 中定义的所有其他内容,这实际上没有任何意义。 【参考方案1】:

你可以这样做:

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

【讨论】:

【参考方案2】:

简答:不,不是直接


但是,可以使用 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;
  


[使用http://sassmeister.com/编译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>

当 mixin 包含在锚点/类中时,mixin 将为所有伪选择器创建规则。


删除旧答案,查看历史以查看它。

【讨论】:

我只想为多个链接状态应用一种颜色。你的解决方案就是我正在寻找的。​​span> 这可能是你需要的,但它没有回答问题 @GustavoSiqueira 据我所知,答案是否定的,正如我在答案的顶部作为注释所说的那样,并且稍微接近结尾。所以我只是提供了一个我以前用过的替代方法,希望能帮助到其他人。 更新了答案;希望它现在“回答”了这个问题,而不是提供一个非常糟糕的技巧。

以上是关于我可以将样式应用于 CSS 或 Sass 中的所有伪选择器吗?的主要内容,如果未能解决你的问题,请参考以下文章

Jquery - 将css样式应用于指定div中的所有元素?

我可以将 CSS 样式应用于元素名称吗?

CSS:将 CSS 样式应用于除 Material Angular 之外的所有内容

less样式如何使用cssmodule

SASS 将样式应用于整个网站,尽管仅导入到单个页面中

对覆盖 CSS 样式感到困惑