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

标签 css css-selectors sass

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

有点像

a:* {
    color: #900;  
}

代替

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

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

最佳答案

简答:不,不直接


但是,可以使用 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 包含在 anchor /类中时,mixin 将为所有伪选择器创建规则。


删除旧答案,查看历史记录。

关于css - 我可以将样式应用于 CSS 或 Sass 中的所有伪选择器吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11291667/

相关文章:

java - 服务器端 css 选择器

html - 如何选择仅包含 "foobar"类的元素,如果它包含任何其他类则不选择?

css - 使用 url 的 sass 后台混合

javascript - SCSS 外部链接到 LitElement 中的样式组件

jQuery 动态 HTML 属性覆盖脚本

html - 我试图创造一种效果,当我将鼠标悬停在一个 div 中时,它会影响所有的 child

HTML Facebook 之类的按钮破坏了网站的响应能力

css - BEM 嵌套命名约定——孙元素

ruby-on-rails - 在 ruby​​ 中评估 SCSS (SASS) 模板(Rails 元素)

javascript - 带有 svg 图像分层的交互式 WebGL 背景