Sass中如何用多选择器为伪元素所在元素设置样式？

一、正确的Sass写法 #

要给同时拥有custom-select-value--companies和custom-select-value--companies-disabled两个类的元素的::after伪元素设置样式，Sass支持两种有效写法，编译后都会生成能正常生效的CSS代码：

写法1：嵌套式（Sass特色写法） #

.custom-select-value--companies.custom-select-value--companies-disabled {
  &::after {
    // 此处添加你的样式规则，示例：
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-color: #999;
  }
}

这里的&代表父选择器本身，编译后会生成.custom-select-value--companies.custom-select-value--companies-disabled::after的CSS选择器，和你原本生效的CSS代码完全一致。

写法2：直接复合选择器（与原生CSS写法一致） #

如果习惯原生CSS的写法，也可以直接在Sass中写标准复合选择器：

.custom-select-value--companies.custom-select-value--companies-disabled::after {
  // 样式规则
  content: "";
  // 其他样式...
}

二、伪元素主元素的专业称谓 #

伪元素所依附的主元素，在CSS规范中的专业称谓是宿主元素（Host Element）。

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