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

Question

例如，我有像：

这样的HTML

<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 Documentation。你可以找到更多细节＆amp;示例here.

说明：:first-child not working as expected

Answer 2

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

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

.page span+a { ... }

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

示例：FIDDLE