我有以下HTML：
<div class="statistics">
<span class="glyphicon glyphicon-calendar"></span>19/06/2015
<span class="glyphicon glyphicon-eye-open"></span> 18 lectures
<span class="glyphicon glyphicon-comment"></span> 1 commentaire
<span class="glyphicon glyphicon-user"></span> Sébastien Sougnez
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart note"></span>
<span class="glyphicon glyphicon-heart-empty note"></span>
</div>
我正在应用一些CSS样式，其中包括：
.article .statistics span.note {
margin-left:0px;
margin-right:5px;
}
.article .statistics span.note:first-child {
margin-left:25px;
}
第一个CSS块已正确应用，所有“注释”跨度之间的间隔约为5像素，但我想在第一个跨度上使用25像素的“注释”类在第一个跨度上留一个边距，但是，第一个子级确实似乎没有选择奇怪的元素，因为我也有这个CSS：
.article .statistics span {
margin-left:25px;
margin-right:5px;
}
.article .statistics span:first-child {
margin-left:0px;
}
在这里，它工作正常，除第一个跨度外，所有跨度均以25px（在左侧）分隔。我想这与该类有关，但是我在Internet上浏览了一下，这似乎是正确的语法。
谢谢
第一个span.note不是的第一个孩子.statistics，因此span.note:first-child不会匹配。第一个孩子是一个span即不具备.note一流的，所以只有span:first-child选择无类将匹配，即子元素。
使用此处描述的技术，将左边距应用于所有span.note子项，然后将其从后续子项中删除，而不是尝试将其分别应用于第一个子项：
.article .statistics span.note {
margin-left:25px;
margin-right:5px;
}
.article .statistics span.note ~ span.note {
margin-left:0px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句