第一个和最后一个孩子的CSS [重复]答案

【问题标题】：CSS for first and last child [duplicate]第一个和最后一个孩子的CSS [重复]
【发布时间】：2016-10-13 03:38:53
【问题描述】：

我需要将 CSS 应用到第一个和最后一个孩子。

这是我的代码：

<div class="parent">
    <div class="A B"><div class="xyz"></div></div>
    <div class="A B"><div class="xyz"></div></div>
    <div class="A B"><div class="xyz"></div></div>
</div>

.parent {
    display: inline-block;
    width: 100%;
}

.A {
    display: inline-block;
    max-width: 75%;
    position: relative;
    clear: both;
}

.B {
    float: left;
    padding: 10px;
}

我试图做如下：

.parent:first-child {
    margin-top: 15px;
}

.parent:last-child {
    margin-bottom: 2px;
}

所以第一个孩子的上边距变成15px，所有孩子之间的差距变成4px；

但它不起作用。请帮我解决这个问题。

【问题讨论】：

标签： css

【解决方案1】：

这样做，您在要定位的元素组上使用伪:first-child/:last-child，而不是它们的父元素。

您可以使用我在示例中使用的类型 div:first-child，或者像 .A:first-child 这样的类

旁注：

~~标记中有语法错误，parent div 上缺少 >，这也可能导致 CSS 失败~~（现在已通过您的编辑修复） em>
.parent 和 :first-child/:last-child 规则之间缺少空格

.parent div:first-child {
    margin-top: 15px;
  background: blue;
}

.parent div:last-child {
    margin-bottom: 2px;
  background: red;
}

<div class="parent">
    <div class="A B">...</div>
    <div class="A B">...</div>
    <div class="A B">...</div>
</div>

根据评论更新

如果我理解正确 .xyz:not(:last-child) 目标所有“xyz”，但最后一个

.parent {
  margin-top: 10px;
}
.parent .xyz {
  background: #ddd;
  margin: 1px;
}
.parent .xyz:not(:last-child) {
  display: none
}

<div class="parent">
    <div class="xyz">A 1</div>
</div>

<div class="parent">
    <div class="xyz">B 1</div>
    <div class="xyz">B 2</div>
</div>

<div class="parent">
    <div class="xyz">C 1</div>
    <div class="xyz">C 2</div>
    <div class="xyz">C 3</div>
</div>

【讨论】：

成功了。非常感谢！！！
我面临的另一个问题...此问题的扩展：我想为除最后一个孩子之外的所有孩子隐藏 div "xyz"。它应该是动态的，即当第一个孩子出现时，应显示 xyz，当第二个孩子出现时，应隐藏第一个孩子的 xyz，并应为第二个孩子显示。
@slayer 添加了一个 2:nd 示例目标，除了最后一个

【解决方案2】：

你快到了

.parent :first-child {
    margin-top: 15px;
}

.parent :last-child {
    margin-bottom: 2px;
}

空间在这里非常重要。这意味着:nth-child 是父级的后代。

【讨论】：