html - 为什么我的 :first-child css 规则没有得到应用？

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不将元素引用为该类型的第一个子元素，但通常是其父元素的第一个子元素！在此引用 MDN：

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

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

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

示例小提琴。