更清晰的方式來定義多個嵌套元素

Question

我有一個幻燈片ID的div。其他還有其他div類，範圍從bcg2到bcg9。我需要所有的嵌套元素來應用下面的屬性。我無法將此應用於嵌套元素，因爲在父div內有其他元素，例如文本和圖像。

#slide .bcg2, #slide .bcg3, #slide .bcg4, #slide .bcg5, #slide .bcg6, #slide .bcg7, #slide .bcg8, #slide .bcg9 {bottom:0; left: 50%; margin-left:-600px;} 

有沒有更好的方法來定義這個，而無需每次重新定義#slide？

Answer 1

如果他們只擁有一流的​​，你可以嘗試：

#slide [class^="bcg"] {} 

否則，有純CSS沒有辦法。

使用SCSS，你可以這樣做：

#slide { 
    .bcg2, .bcg3, .bcg4, .bcg5, .bcg6, .bcg7, .bcg8, .bcg9 {} 
} 

它將編譯成你所得到的。

Answer 2

您可以在一個元素中使用兩種不同的樣式。

.parent{bottom:0; left: 50%; margin-left:-600px;} 

那麼你只需要在HTML中添加這個類與空間，例如：

<div class="parent anotherstyle"></div>