Question

我想将相同的样式应用于占位符伪类的不同浏览器。我是这样做的。

    .input-placeholder{
        &::-webkit-input-placeholder
        {
            color: #7B8E9B;
            font-weight: 500;
            font-size: 16px;
            padding: 0 40px 0 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: inherit;
            line-height: 16px;
        }
    }

    .input-placeholder{
        &:-ms-input-placeholder
        {
            color: #7B8E9B;
            font-weight: 500;
            font-size: 16px;
            padding: 0 40px 0 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: inherit;
            line-height: 16px;
        }
    }

当我尝试将它们组合起来时，它不起作用。

   .input-placeholder::-webkit-input-placeholder, .input-placeholder:-ms-input-placeholder, .input-placeholder::-moz-placeholder, .input-placeholder:-moz-placeholder{
      color: #7B8E9B;
      font-weight: 500;
      font-size: 16px;
      padding: 0 40px 0 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: inherit;
      line-height: 16px;
    }

我也尝试了很少，但它不起作用：

    .input-placeholder{
        &,
        &::-webkit-input-placeholder,
        &:-ms-input-placeholder,
        &:-moz-placeholder,
        &::-moz-placeholder
        {
            color: #7B8E9B;
            font-weight: 500;
            font-size: 16px;
            padding: 0 40px 0 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: inherit;
            line-height: 16px;
        }
    }

任何人都可以建议我如何组合这些课程？

Answer 1

我认为这是因为浏览器会忽略无效选择器中包含的规则。如果组合了供应商前缀的规则集，则每个浏览器都会找到无效的选择器。

为避免重复，您可以使用mixin：

.input-placeholder-mixin() {
    color: #7B8E9B;
    font-weight: 500;
    font-size: 16px;
    padding: 0 40px 0 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
    line-height: 16px;
}
.input-placeholder {
    .input-placeholder-mixin;
}
.input-placeholder::-webkit-input-placeholder {
    .input-placeholder-mixin;
}
.input-placeholder:-ms-input-placeholder {
    .input-placeholder-mixin;
}
/* etc */

如何将相同的样式应用于更少的伪类

1 个答案: