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; 
}