访问父元素

Question

我有以下的HTML和较少

<div class="status"> 
    <div> 
     <div> 
      <p class="status-1">Test</p> 
     </div> 
    </div> 
</div> 

.status { 
    div { 
     div { 
      p { 
       color: red; 

       .status-1 { 
        color: blue; 
       } 
      } 
     } 
    } 
} 

哪里有嵌套在几个div一个<p>元素。现在我期待的status-1类添加到基础DIV，创建一个HTML结构是这样的：

<div class="status status-1"> 
    <div> 
     <div> 
      <p>Test</p> 
     </div> 
    </div> 
</div> 

但现在我无法弄清楚如何从访问.status元素p元素在里面减。我可以只输入

.status { 
    &.status-1 { 
     div { 
      div { 
       p { 
        color: blue; 
       } 
      } 
     } 
    } 
} 

但由于有多个.status类（例如status-0，status-1，status-2），将吸复制粘贴该代码相同的位。有没有办法减少我能够访问父项.status元素？我希望有类似

.status { 
    div { 
     div { 
      p { 
       color: red; 

       ->parent(.status.status-1) { 
        color: blue; 
       } 
      } 
     } 
    } 
} 

谢谢你们！

Answer 1

见Parent Selectors，例如：

.status { 
    p { 
     color: red; 
     .status-1& { 
      color: blue; 
     } 
    } 
} 

注意的是，尽管产生的选择是.status-1.status，它仍然既class="status status-1"和class="status-1 status"元素相匹配。