使用SASS的元素中的目标元素

Question

我在表单外面有一个标签，在表单上有标签。我想用SASS来给不同的标签打不同的样式。在这里，html：

<div class="loginField">

 <label>...</label>

  <form>
        <label>...</label>

        <label>...</label>

   </form>
</div>

我以为我能做到

.loginField 
    {

       label 
       {
       //css rules for label outside form
       }

       &form{

             label{
             //css rules for label insode the form
             }
        }
     }

但是，这并不会为内部标签生成CSS规则--它们与表单之外的标签具有相同的样式.

Answer 1

只需指定顶部标签的直接子关系即可。

SASS

.loginField 
    {

       > label 
       {
       color:red;
       }

       & form{ /* note the space */

             label{
             color:green
             }
        }
     }

CSS

.loginField > label {
  color: red;
}
.loginField form label {
  color: green;
}