減去CSS選擇器問題

Question

我使用較少的CSS，並嘗試使用&來組合多個選擇器。我已經創建了一個虛擬環境來闡述這個問題。

HTML

<div class="ampuse"> 
    <p>This is first</p> 
    <p>This is second</p> 
    <div>This is div 1</div> 
    <p>This is Third</p> 
    <em>This is em</em> 
    <div>This is div 2</div> 
    <div>This is div 3</div> 
</div> 

LESS

.ampuse{ 
    p,div{ 
     color: red; 
     &+&{ 
      background: yellow; 
      color: blue; 
     } 
    } 
} 

現在根據不甚規則，這將創建一個這樣

.ampuse p, 
.ampuse div { 
    color: red; 
} 

.ampuse p + .ampuse p, 
.ampuse p + .ampuse div, 
.ampuse div + .ampuse p, 
.ampuse div + .ampuse div { 
    background: yellow; 
    color: blue; 
} 

的CSS，但我想渲染父只有一次，然後選擇器應該在children元素下工作。這是我想要的css

.ampuse p, 
.ampuse div { 
    color: red; 
} 

.ampuse p + p, 
.ampuse p + div, 
.ampuse div + p, 
.ampuse div + div { 
    background: yellow; 
    color: blue; 
} 

任何人都可以幫助我如何實現它少？

Answer 1

答接受在我的評論說，使用& + p, & + div

.ampuse{ 
    p,div{ 
     color: red; 

     + p, 
     + div { 
      background: yellow; 
      color: blue; 
     } 
    } 
} 

Answer 2

.ampuse { 
    p, 
    div {color: red; 
     + p, 
     + div { 
      background: yellow; 
      color: blue; 
     } 
    } 
} 

使

.ampuse p, 
.ampuse div { 
    color: red; 
} 
.ampuse p + p, 
.ampuse div + p, 
.ampuse p + div, 
.ampuse div + div { 
    background: yellow; 
    color: blue; 
}