如何在 less 中将相同的样式应用于多个伪类

Question

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

    .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;
    }

我也尝试过 LESS 方式，但它不起作用：

    .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;
        }
    }

任何人都可以建议我如何组合这些 classes 吗？

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

如何在 less 中将相同的样式应用于多个伪类

How to apply same style to multiple pseudo classes in less

css

less

如何在 less 中将相同的样式应用于多个伪 类

How to apply same style to multiple pseudo classes in less

css

less

如何在 less 中将相同的样式应用于多个伪类