更新

Question

我尝试执行以下操作，但它不起作用：

* {
    &::selection { text-decoration: underline; }
}

Answer 1

这就是我这样做的方式：

// define it
@mixin selection {
    ::-moz-selection { @content; }
    ::selection { @content; }
}

// use it
@include selection {
    color: white;
    background: black;
}

更新

我建议只使用::selection {}代替autoprefixer而不是mixin。这将使你的代码更薄，你的大脑更轻：）

在这种情况下，autoprefixer会改变这一点：

::selection {
    color: white;
    background: black;
}

...（取决于您的目标浏览器/配置）成为类似的东西：

::-moz-selection {
    color: white;
    background: black;
}

::selection {
    color: white;
    background: black;
}

Answer 2

Mixins使用伪元素选择器;）请参阅我的mixin：

$prefixes: ("-moz-", "");
@mixin selection($color, $background) {
    @each $prefix in $prefixes {
        ::#{$prefix}selection {
            color: $color;
            background: $background;
        }
    }
}

使用方法：

@include selection(white, black);

当然你可以让它更灵活，但对我来说已经足够了;）

Answer 3

虽然::selection伪元素仍在draft spec中，但text-decoration未被声明为允许的样式属性之一。鉴于浏览器无论如何都要实现它，他们应该遵循该文档的规则，不允许text-decoration。

也就是说，您的选择器没有任何问题，但值得注意的是Firefox使用的是以供应商为前缀的版本::-moz-selection。您必须重复该规则以支持该浏览器，以及Chrome，Safari和Opera（有关信息，请参阅this answer）。

所以在SCSS中，你会这样做：

* {
    &::-moz-selection { /* Style any selection */ }
    &::selection { /* Style any selection */ }
}

您可以使用mixins减少它，但我不确定mixins是否与伪元素选择器一起使用。

Answer 4

很好的混合，我已经改为在规则中加入“＆amp;”，它对我来说效果更好。我还添加了一个空前缀来获取没有前缀的规则。

@mixin selection($color, $background) {
   $prefixes: ("-moz-", "-webkit-", "-o-", "-ms-", "");
   @each $prefix in $prefixes {
      &::#{$prefix}selection {
        color: $color;
        background: $background;
      }
   }
}

Answer 5

使用指南针，你可以像下面这样做：

@import "compass/css3/selection";
@include selection($highlightBackground, $highlightColor)

如何在scss \ sass中写* :: selection {}？

5 个答案:

更新