Question

我需要在div 中找到第一个（和最后一个）元素，它具有CSS边距设置（＆gt; 0 px）。（重要的是：这不一定是第一个或最后一个元素！）

基本上，我需要这样做，以便我可以删除第一个元素的margin-top和最后一个的margin-bottom。现在我知道你可能会说“为什么不使用”p：last“CSS语法？”

因为第一个或最后一个元素也可以是其他元素，它可以是列表（UL，OL），图像，段落等。我不能简单地做，ul：last，ol：last，p ：最后因为这可能导致多个元素匹配（每种类型一个）。

我只想将它应用于单个元素。所以这就是为什么我认为jquery是唯一的解决方案。不过，我很乐意在这方面做错。

Answer 1

由于您只想要第一个/最后一个具有边距的孩子，我想您需要使用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);

Answer 2

我建议使用jquery中的过滤方法（http://api.jquery.com/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>

您可能希望以过滤器逻辑为基础......

Answer 3

:last实际上不是jQuery之外的CSS选择器。但您可以使用的是:first-child以及:last-child：

#my-element > *:first-child {
    margin-top: 0;
}

#my-element > *:last-child {
    margin-bottom: 0;
}

编辑：太晚了。但是我肯定会使用>选择器，以便不在<{1}}中为每个第一个孩子设置样式（就像#my-element中的第一个li一样或ul内的strong等。

在div中查找具有边距的第一个元素？（目的：删除保证金）

3 个答案:

在div中查找具有边距的第一个元素？ （目的：删除保证金）

3 个答案:

在div中查找具有边距的第一个元素？（目的：删除保证金）