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

使用SASS在元素内定位元素

1 个答案: