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

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

我觉得你”试图消除那些真的不需要被消除的代码（这只是我的观点）。不管你做什么，如果你没有将文字包装在span标签或其他类似的东西中，实际上只会有1个子元素<button>。这意味着，如果不明确设置类或内联样式，您将无法定位除该元素之外的其他任何元素。跨度标签是一个很好的解决方案，但如果你坚持让他们摆脱你有一对夫妇的其他选项（不过，我觉得跨度标签是最好的）：

1. 创建一个CSS类，定义边距偏移量并将其设置为相应按钮。所以，你想.margin-left一个和.margin-right类设置为其他

2. 你可以写为每个glyphicons的内嵌样式。

就像我上面说的，我认为你有你的选择的最佳解决方案。我不认为你还有什么可以做的。

Answer 2

我不清楚你究竟想要得到什么结果，但仍然不知道你有什么想法来决定它是否适合你的需要。

1. 如果你可以，你可以添加glyphicon和跨度
2. 之间 如果您只删除span标签则可以设置为span标签，而不是glyphicon各自的利润

Answer 3

没有跨度唯一合理的解决办法是增加一个类：

<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> 

和适当的风采吧。但是这会产生可维护性问题：在更改按钮的内容时，您需要同步更改其类。