SASS元素内的目标元素

Question

我在表单外有一个标签，并且标签insode表单。我想用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; 
}