在div中查找具有边距的第一个元素？ （目的：删除保证金）
[英]Find first element in div that has margin? (purpose: remove margin)
问题描述
我需要找到一个具有CSS边距集（> 0 px）的div 中的第一个（和最后一个）元素。 （重要的是：这不一定是第一个或最后一个元素！）
基本上，我需要这样做，以便我可以删除第一个元素的margin-top和最后一个的margin-bottom。 现在我知道你可能会说“为什么不用”p：last“CSS语法？”
因为第一个或最后一个元素也可以是其他元素，它可以是列表（UL，OL），图像，段落等。我不能简单地做，ul：last，ol：last，p：last as这可能导致多个元素匹配（每种类型一个）。
我只想将它应用于单个元素。 所以这就是为什么我认为jquery是唯一的解决方案。 不过，我很乐意这么做错。
3 个解决方案
解决方案1
2 已采纳 2012-09-08 17:22:42
既然你只想要第一个/最后一个有边距的孩子，我想你需要使用jQuery / JavaScript：
var isfirst = 1, lastelm;
$("#divid").find("*").each(function() {
var cur = $(this);
if(parseInt(cur.css("margin-top")) > 0 && isfirst == 1) {
cur.css("margin-top", 0);
isfirst = 0;
}
if(parseInt(cur.css("margin-bottom")) > 0) {
lastelm = cur;
}
});
lastelm.css("margin-bottom", 0);
解决方案2
1 2012-09-08 17:23:27
我建议在jquery（http://api.jquery.com/filter/）中使用filter方法。
这是我能想到的一个例子
<html>
<body>
<p>
<p>A<p>
<p>B<p>
<p style="margin: 10px;">C<p>
<p style="margin: 10px;">C<p>
<p>D<p>
</p>
<script>
$(document).ready(function(){
$('p').filter(function(){
return this.style.margin != '';
}).last().css('color','red');
});
</script>
<body>
您可能希望构建过滤逻辑...
解决方案3
0 2012-09-08 17:13:14
:last实际上不是jQuery之外的CSS选择器。 但你可以使用的是:first-child以及:last-child ：
#my-element > *:first-child {
margin-top: 0;
}
#my-element > *:last-child {
margin-bottom: 0;
}
编辑：太晚了。 但是我肯定会使用>选择器，以免在#my-element为每个第一个孩子设置样式（比如ul的第一个li或p的strong ）。
这<div>即使 "margin: 0px;" 元素也有边距应用样式</div><div id="text_translate"><p>我首先创建了一个名为snake-container的<div> ，其中包含 500x500px 的分割图块。 然后我在 Javascript 中使用了一个 for 循环来放置一个 25x25px 的 20x20px <div>网格，背景为黑色。 然而，与其创建我想要的网格，不如创建一个 625 <div>的长列。 事实证明，每个<div>都有一个奇怪的边距，在.tiles <div>内从左到右一直延伸。 我已将所有内容设置为 0 px 边距，但这些奇怪的行状边距仍然存在。 为什么会这样？</p><p> 这是代码： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> <html> <head> <title>Snake</title> </head> <body> <div id="snake-container"> <div id="tiles"> </div> </div> </body> <script> for (let i = 0; i < 625; i++) { const tile = document.createElement("div"); tile.classList.add("tile"); document.getElementById("tiles").appendChild(tile); } </script> <style> * { margin: 0px; padding: 0px; } #snake-container { width: 100%; height: 100%; display: flex; justify-content: center; } #tiles { width: 500px; height: 500px; }.tile { width: 20px; height: 20px; background-color: black; margin: 0px; } </style> </html></pre></div></div><p></p></div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.