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块被正确应用，所有“note”跨度之间的空间大约是5px但是我想在第一个跨度上放置一个margin-left，其中“note”类为25px，但是，第一个-child似乎没有选择奇怪的元素，因为我也有这个CSS：

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

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

在这里，它工作正常，所有跨度除了第一个之外由25px（左侧）分隔。我想这与课程有关，但我查看了互联网，这似乎是正确的语法。

由于

Answer 1

第一个span.note不是.statistics的第一个孩子，因此span.note:first-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;
}

Answer 2

你可以直接匹配第一个span.note元素，就像这样

/* when it is exactly the first child of its parent 
 * (not your specific case)
 */
span.note:first-child,  

/* when it is not the first-child, and then is 
 * preceded by another span whose class is not ".note"
 */
span:not(.note) + span.note {
    margin-left: 25px;
}

Codepen示例：http://codepen.io/anon/pen/WvdqbR

Answer 3

您似乎无法理解:first-child。所有这个选择器都是＆＃34; 我是我父母的第一个孩子吗？＆＃34; - 不再是。你们span.note都没有达到这个目的。

Answer 4

对此属性非常重要

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

CSS：班级

4 个答案: