Question

找不到合适的词来解释所以这是一个代码示例：

<button class="btn btn-default">
  <i class="glyphicon glyphicon-alert"></i>
  <span>button</span>
</button>
<button class="btn btn-default">
  <span>button</span>
  <i class="glyphicon glyphicon-alert"></i>
</button>

两个按钮，一个在前面有一个glyphicon，一个在结尾有一个glyphicon

现在假设我们想在单词和图标之间添加更多的差距：

.btn {
    > .glyphicon:first-child {
        margin-right: 15px;
    }
    > .glyphicon:last-child {
        margin-left: 15px;
    }
}

很好地工作：http://codepen.io/anon/pen/wzxRPw

我的问题......如果没有额外的跨度，怎么办呢？

如果我删除了跨度，那么glyphicon是唯一的元素，所以它被视为第一个和最后一个

编辑：注意：我在问题中的目的是找出如何在不添加额外类的情况下完成此操作，并且不使用span标记。

我知道也许理想的解决方案是保持跨度或添加一个类，我只是想也许有一种方法可以在我不知道的CSS中做到这一点（我还在学习）

Answer 1

我觉得你正在努力消除那些真正不需要被淘汰的代码（这只是我的观点）。无论你做什么，如果你不用Traversal标签或其他类似的东西包装文本，那么它们只会是实际span的1个子元素。。意思是，如果不明确设置类或内联样式，您将无法定位除该元素之外的任何内容。 span标签是一个很好的解决方案，但如果你坚持要摆脱它们，你还有其他几个选择（但是，我认为span标签是最好的）：

创建一个<button>类，用于定义边距偏移并将其设置为相应按钮。因此，您需要将CSS类设置为一个，将.margin-left设置为另一个
您可以为每个字形编写内联样式。

就像我上面说的那样，我认为你有最好的解决方案。我不认为你还能做其他事情。

Answer 2

没有span的唯一合理解决方案是添加一个类：

<button class="btn btn-default icon-on-left">
  <i class="glyphicon glyphicon-alert"></i>
  button
</button>
<button class="btn btn-default icon-on-right">
  button
  <i class="glyphicon glyphicon-alert"></i>
</button>

并适当地设计风格。但这会产生可维护性问题：在更改按钮内容时，您需要同步更改其类。

Answer 3

我不清楚你究竟想要得到什么结果，仍然告诉你一些想法，你必须决定它是否适合你的需要。

如果可以，可以在glyphicon和span
如果仅删除span标记，则可以为span标记设置相应的边距而不是glyphicon

CSS第一个/最后一个没有元素的孩子？

3 个答案: