少，有條件的家長選擇

Question

我有一個更低的結構，就像這樣：

.main1, 
.main2, 
.main3, 
.main4{ 
    & .test1{ 
     background-color: #f00; 
    } 

    & .test2{ 
     background-color: #ff0; 
    } 
} 

是否有根據當前父元素修改background-color的方法嗎？例如對於.main1，我想＃f00作爲背景，而對於.main2而不是＃ff0。

非常感謝！

Answer 1

有可能如孩子一個內指定的父選擇（見Changing Selector Order）：雖然它（即使不再那麼繁瑣），如果比較

.test { 
    .main1 & {background-color: red} 
    .main2 & {background-color: blue} 
} 

往往更可讀，更阻礙了只是普通的直正向代碼：

.main1 .test {background-color: red} 
.main2 .test {background-color: blue}