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

Question

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

我怎么能做到这一点？

一个例子是：

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

想象一下，我有以下内容：

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

• 我希望Item 1拥有, should be的margin-right属性。5pxmargin-left0
• 我希望Item 2没有任何样式应用于它。
• 我希望Item 3拥有, should be的margin-left属性。5pxmargin-right0

如果我有这个例子：

<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 选择器有点生疏了。

标签： htmlcsssasscss-selectors

Answer 1

对您的 SASS 规则稍作修改就可以得到您想要的结果。尝试以下 SASS 规则。

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