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

Posted 2023-03-06

【中文标题】第一个和最后一个孩子的CSS [重复]

【英文标题】：CSS for first and last child [duplicate]

【发布时间】：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；

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

【参考方案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 是父级的后代。