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

的类

旁注：

~~标记中出现语法错误，> div上缺少parent，这也可能导致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>

Answer 2

你快到了

DWORD

这里的空间非常重要。这意味着.parent :first-child { margin-top: 15px; } .parent :last-child { margin-bottom: 2px; }是父母的后代。

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

2 个答案: