将CSS应用于元素中的第一个子元素，并将CSS应用于元素中的最后一个子元素，但如果仅子元素则不应用

Question

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

我该怎么做？

一个例子是：

• 如果该元素是div中的第一个子元素，请为其提供margin-right的{​​{1}}属性
• 如果该元素是5px中的最后一个子元素，请为其赋予div属性“ 5px”
• 如果元素是margin-left中的独生子，则将div和margin-right设为margin-left。

想象一下我有以下情况：

0

• 我希望<div> <i>Item 1</i> <span>Item 2</span> <i>Item 3</i> </div> 具有Item 1的{​​{1}}属性，margin-right应该是5px。
• 我希望margin-left不会应用任何样式。
• 我希望0具有Item 2的{​​{1}}属性，Item 3应该是margin-left。

如果我有这个示例：

5px

• 我希望margin-right不会应用任何样式

我已经尝试过类似的事情：

0

但是，如果我有这种情况，这是行不通的：

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

因为当我实际需要Item时，div { i { &:first-child { margin-right: 5px; } &:last-child { margin-left: 5px; } } } 的{​​{1}}和<div> <i>Item 1</i> <span>Item 2</span> </div> 属性都设置为Item 1。

关于如何解决此问题的任何想法？我对CSS选择器有些生疏。

Answer 1

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

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

Answer 2

只需在节点是唯一子节点时添加条件

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