將2個CSS類的值合併爲1並總計邊距和填充

這符合我客戶的項目要求。我只是舉例margin。如果有兩個CSS類並且具有類似的屬性。將2個CSS類的值合併爲1並總計邊距和填充

CSS

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

HTML

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

我們都知道它會從一類到另一個覆蓋性能，但在這種情況下，客戶端需要同時添加margin-top並申請。所以他期待margin-top:50px。

我知道在CSS中沒有辦法做到這一點。

任何人都可以提出一些建議嗎？我想避免使用JS/jQuery。然而，最後，如果可以的話，我可以使用它。

來源

2017-08-12 Sodhi saab

你不能用純CSS做吧！ – Ehsan

Sodhi下面有很多答案，你是怎麼和他們相處的？ – halfer

無論如何你都無法用純css來做它，因爲要做到這一點，你必須得到margin-top的類，然後求和它們。問題就在這裏，你不能通過純css訪問另一個類。

但你可以用javascript來做到這一點。

來源

2017-08-12 13:16:14 Ehsan

你爲什麼不：

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

會給你50像素的margin-top既是.selector-1和.selector-2邊距的相結合，稱爲.selector-1.selector-2一個邊距。

來源

2017-08-12 13:18:34

你不能用純CSS做到這一點，所以這裏是jQueryhttps://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({ 
 
\t '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>

希望的解決方案，這將幫助你。

來源

2017-08-12 13:33:52 Shiladitya

試試這個jQuery的：簡單的解決方案

<div data-margin1="20" data-margin2="30" class="content">content</div> 

(function(){ 
let content = $('.content'); 
let margin1 = content.data('margin1'); 
let margin2 = content.data('margin2'); 
content.css({'margin-top':margin1+margin2}); 
}())

來源

2017-08-12 13:35:01

這將允許客戶輸入兩個邊距，然後你可以使用它們，因爲你想標記答案，如果是你想要XD –

將2個CSS類的值合併爲1並總計邊距和填充

回答

相關問題