将特定边距应用到第一个和最后一个非兄弟元素

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 适用于所有框，由于嵌套 divs，不确定如何处理 :first-child。有什么想法吗？

Answer 1

看起来您可以使用 css 选择器的组合来实现此目的，即 > 以及 :first-child 和 :last-child

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

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

这会选择 any 第一个和最后一个子元素的直接 MY-CUSTOM-BOX 后代。这应该在盒子具有相同级别的父级（即容器 -> div -> MY-CUSTOM-BOX）

的情况下工作

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

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

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

这会选择 container 的第一个和最后一个子节点，然后为其中的任何 MY-CUSTOM-BOX 个元素提供 0 的边距 left/right。

这是一个（相对粗糙的）fiddle 演示两个示例：https://jsfiddle.net/ttakchr1/

将特定边距应用到第一个和最后一个非兄弟元素

Apply specific margins to first and last element that are not siblings

html

css

margin

css-selectors

twitter-bootstrap