html - CSS:有类(class)的 child 的第一个 child

Question

我有以下 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 block ，所有“note”span 之间的间距约为 5px，但我想在第一个 25px 的“note”类的 span 上留边距，但是，第一个-child 似乎没有选择奇怪的元素，因为我也有这个 CSS:

.article .statistics span {
    margin-left:25px;
    margin-right:5px;
}

.article .statistics span:first-child {
    margin-left:0px;
}

在这里，它工作正常，除了第一个之外，所有 span 都以 25px(在左侧)分隔。我想这与类(class)有关，但我查看了 Internet，这似乎是正确的语法。

谢谢

Answer 1

第一个 span.note 不是 .statistics 的第一个 child ，所以 span.note:first-child 不会匹配。第一个 child 是 span 没有 .note 类，所以只有 span:first-child 没有类的选择器将在该子元素上匹配。

使用描述的技术 here ，将左边距应用于所有 span.note 子级，然后将其从后续子级中移除，而不是尝试将其单独应用于第一个:

.article .statistics span.note {
    margin-left:25px;
    margin-right:5px;
}

.article .statistics span.note ~ span.note {
    margin-left:0px;
}