如何用SCSS在首个子元素含指定类时设置第二个子元素样式？

情况1：选择紧跟在目标元素后的同级.second-child #

如果你的DOM结构中，.second-child是直接紧跟在带有has-this-class的.first-child之后的同级元素，可使用以下更直观的SCSS写法（和你原代码编译结果一致）：

.parent-div {
  .first-child.has-this-class + .second-child {
    // 示例样式
    color: #ff4444;
    border: 1px solid #ccc;
  }
}

情况2：选择所有同级的.second-child（无论位置） #

如果.second-child和带has-this-class的.first-child是同级，但中间存在其他元素，需要改用通用兄弟选择器~，写法如下：

.parent-div {
  .first-child.has-this-class ~ .second-child {
    // 示例样式
    background-color: #f5f5f5;
    padding: 8px;
  }
}

原代码未生效的可能原因 #

1. DOM结构不匹配：.first-child和.second-child必须是.parent-div下的同级元素；若使用+选择器，.second-child还需紧跟在目标.first-child之后。
2. 优先级冲突：如果.second-child已有更高优先级的样式规则，需提升当前选择器的优先级（比如增加父类前缀，不推荐滥用!important）。

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