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

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;}

是否有一种更整洁的方法来定义它，而不每次都重新定义#幻灯片？

Answer 1

如果它们只有.bcgNUMBER类，您可以尝试：

#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>