2 
<!-- 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>

4

2 に答える 2

9

:first-child最初の子を選択します。:first-of-typeあなたの目的のために使用してください：

section h1 span:first-of-type {
    color: #FF0033;
}
于 2012-07-04T09:07:25.990 に答える
2

:first-child要素をそのタイプの最初の子として参照しませんが、通常はその親の最初の子として参照します。これについてMDNを引用する：

CSS疑似クラスは、その:first-child親の最初の子要素である要素を表します。

必要なのは、次のような:first-of-typeセレクター（MDNリンク）です。

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

フィドルの例。

于 2012-07-04T09:09:23.503 に答える