Question

我的HTML中有特定类型的框，让我们对所有人说margin: 10px;。它们在页面上显示为一行（使用Bootstrap），我想删除第一个元素的左边距和最后一个元素的右边距。我可以使用:first-child或:first-of-type及其各自的lasts，但这些元素不是兄弟姐妹，也没有共同的父母。 HTML看起来像这样：

<div class='container'>
  <div class='col-md-2'>
    <div class='MY-CUSTOM-BOX'>
    </div>
  </div>
  <div class='col-md-5'>
    <div class='MY-CUSTOM-BOX'>
    </div>
  </div>
  <div class='col-md-5'>
    <div class='MY-CUSTOM-BOX'>
    </div>
  </div>
</div>

:first-of-type适用于所有框，因为嵌套:first-child而无法确定如何接近divs。有什么想法吗？

Answer 1

看起来你可以使用css选择器的组合来实现这一点，即>以及:first-child和:last-child

:first-child > .MY-CUSTOM-BOX {
  margin-left: 0;
}

:last-child > .MY-CUSTOM-BOX {
  margin-right: 0;
}

这将选择任何的第一个和最后一个子元素的直接MY-CUSTOM-BOX后代。这应该适用于盒子具有相同级别的父级（即容器 - ＆gt; div - ＆gt; MY-CUSTOM-BOX）

你也可以反过来做，这可能会给你更好的结果，取决于你的嵌套方式：

.container > :first-child .MY-CUSTOM-BOX {
  margin-left: 0;
}

.container > :last-child .MY-CUSTOM-BOX {
  margin-right: 0;
}

这将选择container的第一个和最后一个孩子，然后在其左边/右边的0范围内提供任何MY-CUSTOM-BOX个元素。

这是一个（相对粗糙的）小提琴，展示了两个例子：https://jsfiddle.net/ttakchr1/

将特定边距应用于非兄弟姐妹的第一个和最后一个元素

1 个答案: