如何为某种元素的第一个孩子设计风格？

Question

例如,我有像:

<div class='page'>
    <span>2</span>
    <span>2</span>
    <a>1</a>
    <a>6</a>
</div>

我怎样才能为第一个孩子设计一个

我用过这样的: .page a:first-child {color:red}

但它没有运行.

Answer 1

用first-of-type而不是first-child

.page a:first-of-type{
    color:red;
}

:first-of-type CSS伪类在其父元素的子元素列表中表示其类型的第一个兄弟.

摘自MDN文档.您可以在此处找到更多详细信息和示例.

说明:: first-child没有按预期工作

Answer 2

正如Pranav c所说,你可以使用 .page a:first-of-type { ... } 或 .page a:nth-of-type(1) { ... }但它们都不适用于IE8

因此,如果我们可以假设<span>总是会在那里,那么

.page span+a { ... }

将确保只有跨度后的第一个a样式,这就像你现在可以获得跨浏览器一样好.

示例:FIDDLE