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

时间:2022-10-25 09:39:23

Is it possible apply style to all of an anchor tag's pseudo selectors with CSS or Sass?

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

Something like

a:* {
    color: #900;  
}

instead of

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

I just want to reset standard styling. In CSS, the wildcard can be used to apply styles to all elements... but how about to all pseudo-selectors?

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

1 个解决方案

#1


9  

Short Answer: No, not directly

简答:不,不是直接的


However, a mixin could be used to have a similar effect.

但是,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]

[使用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>

The mixins will create a rule for all the pseudo selectors when the mixin is included on the anchor / class.

当mixin包含在anchor / class中时,mixins将为所有伪选择器创建规则。


Removed old answer, look at history to see it.

删除旧的答案,看看历史,看看它。

#1


9  

Short Answer: No, not directly

简答:不,不是直接的


However, a mixin could be used to have a similar effect.

但是,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]

[使用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>

The mixins will create a rule for all the pseudo selectors when the mixin is included on the anchor / class.

当mixin包含在anchor / class中时,mixins将为所有伪选择器创建规则。


Removed old answer, look at history to see it.

删除旧的答案,看看历史,看看它。