css - 定义多个嵌套元素的更简洁的方法

Question

我有一个 id 为 slide 的 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

如果他们只有.bcgNUMBER类，你可以试试:

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

否则纯CSS没办法。

使用 SCSS ，你可以这样做:

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

它会编译成你所拥有的。