将2个CSS类中的值合并为1并总结边距和填充

Question

这是我客户的项目要求。我只是以margin为例。如果有两个CSS类并且具有类似的属性。

CSS

.selector-1 {
    margin-top: 20px;
}
.selector-2 {
    margin-top: 30px;
}

HTML

<div class="selector-1 selector-2">content</div>

我们都知道它会覆盖从一个类到另一个类的属性，但在这种情况下，客户端想要同时添加margin-top和apply。所以他期待 margin-top:50px 。

我知道在CSS中无法做到这一点。

有人能提出什么建议吗？我想避免使用JS / jQuery。但是，最后，我可以使用，如果有可能的话。

Answer 1

为什么不要你：

.selector-1.selector-2 { margin-top: 50px }

由于.selector-1和.selector-2 margin-top被合并到一个名为.selector-1.selector-2的上边距，将为您提供50px的保证金。