嵌套跨度在css类中

Question

我正在编写一个带有必需验证字段的动态表单，目前我有一个名为errorRequired的父类，有一个名为x-form-label的嵌套类，并且在这个类的内部是一个带有文本的span，它是我的css规则正常工作，除了span我想将颜色更改为红色......

.errorRequired {
  font-style: oblique;
  color: $mweb-colour-red;
  >.x-form-label{
    &span {
      color: red;
    }
  }
}

编译CSS

.errorRequired{
  font-style:oblique;
  color:red
}
.errorRequired span{color:red}

我做错了什么？

提前谢谢

Answer 1

你的跨度直接位于＆符号旁边，它会附加＆＃39; span＆＃39;到了＆＃39; x-form-label＆＃39;的班级。这会将选择器输出为.errorRequired > .xform-labelspan。

你实际上并不需要＆符号，所以请尝试这样做：

.errorRequired {
  font-style: oblique;
  color: $mweb-colour-red;
  >.x-form-label{
    span {
      color: red;
    }
  }
}

然后

跨度选择器应输出为.errorRequired > .xform-label span

Answer 2

你必须使用＆amp;而是＆gt;。

.errorRequired {
  font-style: oblique;
  color: $mweb-colour-red;
  & .x-form-label{ /* here, I changed > to & */
    &span {
      color: red;
    }
  }
}

或

.x-form-label {
    .errorRequired & span {
       color: red;
    }
}