第一个和最后一个孩子的CSS

Question

我需要将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;

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

Answer 1

这样做,在你想要定位的元素组上使用伪:first-child/ :last-child,而不是它们的父元素.

您可以使用div:first-child我在我的示例中使用的类型,或类似的类.A:first-child

边注:

• 有一个在标记语法错误,缺少>对parentDIV,这也可能会导致CSS失败(现在的固定与编辑)
• 缺少/ 规则之间.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>