訪問父元素

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"元素相匹配。