将 CSS 应用于第一个子元素，将 CSS 应用于元素内的最后一个子元素，但如果只有子元素则不适用答案

【问题标题】：Apply CSS to first child and CSS to last child inside element but not if only child将 CSS 应用于第一个子元素，将 CSS 应用于元素内的最后一个子元素，但如果只有子元素则不适用
【发布时间】：2020-04-08 21:46:20
【问题描述】：

我正在寻找一种优雅的 SASS 解决方案，将样式应用于第一个子元素，并将不同的样式应用于元素内的最后一个子元素，但如果它是唯一的子元素，则没有样式。

我怎样才能做到这一点？

一个例子是：

如果元素是div 中的第一个子元素，则为其赋予margin-right 属性5px
如果元素是div 中的最后一个子元素，则为其指定margin-left 属性`5px
如果元素是div 中的唯一子元素，则让margin-right 和margin-left 成为0。

想象一下我有以下情况：

<div>
  <i>Item 1</i>
  <span>Item 2</span>
  <i>Item 3</i>
</div>

我希望Item 1 具有5px 的margin-right 属性，margin-left 应该是0。
我希望Item 2 没有应用任何样式。
我希望Item 3 具有5px 的margin-left 属性，margin-right 应该是0。

如果我有这个例子：

<div>
  <span>Item</span>
</div>

我希望 Item 没有应用任何样式

我尝试过这样的事情：

div {
  i {
    &:first-child {
      margin-right: 5px;
    }
    &:last-child {
      margin-left: 5px;
    }
  }
}

但如果我有这种情况，这不起作用：

<div>
  <i>Item 1</i>
  <span>Item 2</span>
</div>

因为Item 1 将margin-right 和margin-left 属性设置为5px，而我实际上想要margin-right: 5px; margin-left: 0;。

关于如何解决这个问题的任何想法？我的 CSS 选择器有点生疏了。

【问题讨论】：

你能检查两次你的最后一个例子吗？ Item1 不能使用给定的代码应用左边距。

标签： html css sass css-selectors

【解决方案1】：

当节点是唯一的子节点时添加一个条件

div {
  > * {
    &:first-child {
      margin-right: 5px;
    }
    &:last-child {
      margin-left: 5px;
    }
    &:only-child {
      margin: 0;
    }
  }
}

【讨论】：

【解决方案2】：

对您的 SASS 规则稍作修改可能会得到您想要的结果。试试下面的 SASS 规则。

div {
  i {
    &:first-of-type {
      margin-right: 5px;
    }
    &:last-child {
      margin-left: 5px;
    }
  }
}

【讨论】：