Css 如何在更少的时间内将同一样式应用于多个伪类

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

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

---

有谁能建议我如何组合这些类吗？

我想这是因为浏览器忽略了无效选择器中包含的规则。如果合并带有供应商前缀的规则集，则每个浏览器都会发现无效的选择器

为了避免重复，可以使用混合键：

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

---

我认为这是因为浏览器忽略了无效选择器中包含的规则。如果合并供应商前缀规则集，每个浏览器都会发现无效的选择器。谢谢您的回答。但是如果它忽略了无效的选择器，那么它至少应该将该类应用于chrome，因为它是第一个选择器。请更正。@Rinkksh它至少应该将该类应用于chrome，因为它是第一个选择器-不，在这种情况下，整个选择器列表被视为无效，应根据标准：，等忽略。感谢您的澄清。