如何在LESS中为多个伪类统一应用相同样式？

你遇到的问题核心在于浏览器对私有前缀伪类的选择器组处理逻辑：当你把不同浏览器的私有伪类放在同一个选择器组里时，浏览器会直接忽略它不认识的选择器，进而跳过整个选择器组，导致样式完全不生效。比如IE会不认识::-webkit-input-placeholder，就会把包含它的整个选择器组都丢弃；Chrome同理会忽略:-ms-input-placeholder相关的部分。

正确解决思路：拆分选择器 + 复用样式 #

不管是原生CSS还是LESS/Sass，核心都是把每个浏览器的私有伪类写成独立选择器，同时通过变量或混合宏避免样式代码重复。

1. 原生CSS写法（用CSS变量复用样式）

/* 定义可复用的样式变量 */
:root {
  --placeholder-shared-styles: {
    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 {
  @apply --placeholder-shared-styles;
}
.input-placeholder:-ms-input-placeholder {
  @apply --placeholder-shared-styles;
}
.input-placeholder::-moz-placeholder {
  @apply --placeholder-shared-styles;
}
.input-placeholder:-moz-placeholder {
  @apply --placeholder-shared-styles;
}
/* 加上标准伪类，适配现代浏览器 */
.input-placeholder::placeholder {
  @apply --placeholder-shared-styles;
}

2. LESS写法（用混合宏复用样式）

// 定义混合宏，存放重复的样式
.placeholder-shared-styles() {
  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 {
    .placeholder-shared-styles();
  }
  &:-ms-input-placeholder {
    .placeholder-shared-styles();
  }
  &::-moz-placeholder {
    .placeholder-shared-styles();
  }
  &:-moz-placeholder {
    .placeholder-shared-styles();
  }
  // 标准伪类适配现代浏览器
  &::placeholder {
    .placeholder-shared-styles();
  }
}

补充说明 #

现在绝大多数现代浏览器已经支持标准的::placeholder伪类了，所以可以优先写标准样式，再补充私有前缀版本做兼容，既保证兼容性又减少冗余代码。

内容的提问来源于stack exchange，提问作者Rinkesh Golwala