将两个CSS类的值合并为1，并对边距和填充进行汇总。

Question

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

CSS

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

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

我们都知道它会将属性从一个类覆盖到另一个类，但在本例中，客户端希望同时添加margin-top和apply。所以他期待着margin-top:50px.

我知道在CSS中没有办法做到这一点。

有人能提点建议吗？我希望避免使用JS/jQuery。不过，到了最后，我可以用，如果可以的话。

Answer 1

无论如何，您都不能使用纯css来实现它，因为要做到这一点，您必须获得类的margin-top，而sum them.the问题就在这里，您不能通过纯css访问另一个类。

但是你可以用javascript来做。

Answer 2

你为什么不：

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

将给你50便士的利润率，因为.selector-1和.selector-2的利润率最高被合并成一个叫做.selector-1.selector-2的利润率上限。

Answer 3

您不能使用纯CSS来实现它，所以下面是使用jQuery https://jsfiddle.net/z5pdt17j/1/的解决方案

​

$('body').append('<div class="selector-1 hidden" id="div1"></div><div class="selector-2 hidden" id="div2"></div>');

var tmargin = parseInt($('#div1').css('margin-top')) + parseInt($('#div2').css('margin-top'));

$('div#divTest').css({
	'margin-top': `${tmargin}px`
});

$('#div1 , #div2').remove();

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

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selector-1 selector-2" id="divTest">content</div>

​

希望这能帮到你。