Question

<!-- HTML -->
<section class="row slide">
    <div class="span4">
        <h1>
            <span>Some</span>
            <br />
            <span>Title</span>
        </h1>
    </div>
</section>

<section class="row slide">
    <div class="span4">
        <h1>
            <em>Some emphasis</em>
            <br />
            <span>Some</span>
            <br />
            <span>Title</span>
        </h1>
    </div>
</section>

<section class="row slide">
    <div class="span4">
        <h1>
            <em>Some other emphasis</em>
            <br />
            <span>Some</span>
            <br />
            <span>Title</span>
        </h1>
    </div>
</section>


/* CSS */
section h1 span:first-child{
    color:#FF0033;
    }

我正在尝试定位<span>容器中的每个<h1>标记中的第一个<section>，但只要<span>不是第一个子元素（和<em>一样，那就是不应用规则。

Answer 1

:first-child选择第一个孩子。使用:first-of-type表示您的目的：

section h1 span:first-of-type {
    color: #FF0033;
}

Answer 2

:first-child不会将该元素引用为该类型的第一个子元素，但通常是其父元素的第一个子元素！ Citing MDN on this：

:first-child CSS伪类表示作为其父元素的第一个子元素的任何元素。

您需要的是:first-of-type选择器（MDN link），如下所示：

section h1 span:first-of-type{
  color:#FF0033;
}

Example fiddle

为什么我的：first-child css规则不适用？

2 个答案: