为什么我的: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;
}