CSS：第一个 child of children 有一个 class

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" 跨度之间的 space 约为 5px，但我想在第一个上放置一个 margin-left跨度为 25px 的 "note" class，但是，first-child 似乎不是 select 元素，这很奇怪，因为我也有这个 CSS :

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

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

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

谢谢

Answer 1

尝试对这个很重要属性

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

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

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

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

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

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

Answer 4

你好像没看懂:first-child。这个选择器只问“我是我的 parent 中的第一个 child 吗？”- 仅此而已。 None 的 span.note 人满足了这一要求。

CSS：第一个 child of children 有一个 class

CSS: First child of children with a class

html

css

css-selectors