第一个孩子选择器可能存在错误？

Question

我发现了一个可能的错误（至少，我不确定是什么问题！）。

我有5个跨度。除第一个之外的所有都有一个total_breakdown类。我为该类提供了一些样式，然后为第一个子元素添加了特定的样式 - 即更改颜色。

.total_breakdown {
    color: #727272;
    font-size: 14px;
    padding: 0 10px 0 2px;
}
.total_breakdown:first-child {
   color:black;
}

这不起作用 - .total_breakdown类的第一个范围与其他类保持一致。现在，这是有趣的部分 - 如果我删除第一个span（没有total_breakdown类名），它工作正常。对我来说似乎有些错误......

对于特定示例，see here

只是想添加，我在最新的FF和Chrome上测试了这个结果

Answer 1

按定义工作，因为.total_breakdown:first-child并不意味着“属于类.total_breakdown的第一个子”，而是“作为其父级的第一个子元素并且另外属于类{{1}的元素}”。 CSS中没有“第一类”选择器。

Answer 2

所以，虽然这就是它的工作方式，但我可以为你提供一个解决方法：

.total_breakdown {
    color: black;
    font-size: 14px;
    padding: 0 10px 0 2px;
}
span, /* styles the spans preceding the first .total-breakdown */
.total_breakdown ~ .total_breakdown { /* styles all .total-breakdown elements */
   color: #727272;                       that follow a .total-breakdown element */
}

demo

参考文献：

• General-sibling ~ combinator。