通过css和jquery将第一个和最后一个孩子应用于某个<tr> id

Question

基本上，我希望能够删除 'non' 第一个和最后一个子副本下方和上方的 margins。所以我试图定位row，它有重复的id's.. 在这种情况下#Day2 和#Day6，然后我尝试选择:first-child 和:last-child

tr#Day2:first-child td, tr#Day6:first-child td { margin-top: 0px !important; }
tr#Day2:last-child td, tr#Day6:last-child td { margin-bottom: 0px !important; } 

我不确定 css 唯一的方法是否能够实现我想要的，或者我目前正在做的事情是否正确。

我尝试使用jquery 来做到这一点是：

<script>
    $(document).ready(function () {
        $(document).ajaxComplete(function () {
            var seen = {};
            $('table tr td').each(function() {
                var txt = $(this).text();
                if (seen[txt])
                    $(this).css("margin-bottom", "0px");
                else
                   seen[txt] = true;
            });
        });
   });
</script>

虽然这似乎并没有删除重复的边距，我的 css 尝试也没有，但我确信有办法。也许我不能将:first-child 和:last-child 与tr id 一起使用？如果是这样，还有其他方法可以实现我想要的吗？

非常感谢任何帮助，谢谢。

JSFiddle 请查看我的example here。

**

解决方案

** 所有这些都无需 jQuery 即可实现。请在此处找到工作版本。 感谢@Marcin 为我指出解决方案。

JSFiddle: View Solution

Answer 1

只有解决方法：

.Day2 { margin: 0px 0px 5px 0px; }
.Day2 ~ .Day2 td { margin-top: 5px; }

这仅设置每个.Day2 的下边距，然后，如果之前有任何.Day2，则将margin-top 设置为5px；

取自CSS3 selector :first-of-type with class name?

您不应在多个元素上使用相同的id。请改用class（例如class="day1"）。