如何在SCSS中为同class的特定HTML元素单独设置CSS属性？

你原来的SCSS代码问题在于嵌套选择器没有脱离父级范围，编译后会变成.content span.content，只会匹配嵌套在.content元素内的带content类的span，不符合需求。可以通过以下两种方式实现：

方式一：独立选择器写法 #

直接分开定义通用样式和span专属样式，清晰直观：

.content {
  padding-left: 30px;
}

span.content {
  color: red;
}

方式二：嵌套+@at-root写法 #

如果想保持在.content的嵌套结构里编写，可以用@at-root跳出父级选择器的范围，结合插值语法生成正确的选择器：

.content {
  padding-left: 30px;

  @at-root span#{&} {
    color: red;
  }
}

两种写法编译后的CSS结果一致，都会给所有直接带content类的span元素添加红色文字颜色，同时不影响带content类的div元素的样式。

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