简体   繁体   中英

Can I apply a style to all pseudo selectors in CSS or Sass?

Is it possible apply style to all of an anchor tag's pseudo selectors with CSS or 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?

Short Answer : No, not directly


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

// 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>

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


Removed old answer, look at history to see it.

U can do it like that:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM