更清晰的方式来定义多个嵌套元素

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

如果他们只有.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>