如何在LESS中使用css選擇器的加號過程？

有沒有更有效的方式來編寫以下LESS格式的CSS，還是這樣呢？如何在LESS中使用css選擇器的加號過程？

li:first-child { 
    border-right: solid 0.188em #da291c; 
    padding: 0 2em 0 0; 
} 

li:first-child + li { 
    padding: 0 0 0 2em; 
} 

li:first-child + li + li { 
    padding: 0 2em 0 0; 
    border-right: solid 0.188em #da291c; 
    margin-left: 21%; 
} 

li:first-child + li + li + li { 
    padding: 0 0 0 2em; 
}

來源

2016-04-15 blackhawk

你可能會像[this]一樣使它複雜化（http://lesscss.org/less-preview/#%7B%22less%22%3A%22li%20%7B%5Cn%20%20%26%3Afirst-子％2C％20％26％3Afirst - 子％20％2B％20％26％20％2B％20％26％20％7B％5CN％20％20％20％20border右％3A％20solid％200.188em ％20％ 23da291c％3B％5CN％20％20％20％20padding％3A％200％202em％200％200％3B％5CN％20％20％7D％5CN％20％20％26％3Afirst - 子％20％2B％ 20％26％20％2B％20％26％20％7B％5CN％20％20％20％20margin左％3A％2021％25％3B％5CN％20％20％7D％5CN％20％20％ 26％3Afirst - 子％20％2B％20％26％2C％20％26％3Afirst - 子％20％2B％20％26％20％2B％20％26％20％2B％20％26％7B％ 5CN％20％20％20％20padding％3A％200％200％200％202em％3B％5CN％20％20％7D％5CN％7D％22％7D）。 – Harry

（繼續之前的評論），但我不會推薦使用這個或任何Less'＆'的東西。你所擁有的就像Less（與選擇器分組一樣），比使用'＆'東西更具可讀性。如果你不想支持IE8，我也推薦使用'nnth-child'。 – Harry

您可以使用&來指代父選擇：

li:first-child { 
    border-right: solid 0.188em #da291c; 
    padding: 0 2em 0 0; 

    & + li { 
     padding: 0 0 0 2em; 

     & + li { 
      padding: 0 2em 0 0; 
      border-right: solid 0.188em #da291c; 
      margin-left: 21%; 

      & + li { 
       padding: 0 0 0 2em; 
      } 
     } 
    } 
}

你也可以使用:nth-child，它可能是更適合你正在嘗試做的，但檢查瀏覽器的支持http://caniuse.com

來源

2016-04-15 13:14:40 Mike

只是FYI，在鄰居兄弟選擇器的情況下，你實際上並不需要'＆'，只是'+ [selector]'會做 –

如何在LESS中使用css選擇器的加號過程？

回答

相關問題