html - CSS セレクターの n 番目の子が奇妙な結果を生成する

Question

nth-childCSSセレクターの使用中に奇妙な問題が発生します。

私は次のHTMLを持っています:

<div class="block feature-callout-c" id="overview">
   <div class="row">
        <div class="span twelve">

            <span class="intro">ABCD</span>
        </div>
    </div>
    <div class="row number">
        <div class="span two">&nbsp;</div>
        <div class="span two data-stat">
            <i class="text">500M</i>
            <p><span class="faux-tip">Tweets</span></p>
        </div>
        <div class="span two data-stat">
            <i class="text">20M+</i>
            <p><span class="faux-tip">Blog Posts</span></p>
        </div>
        <div class="span two data-stat">
            <i class="text">200M</i>
            <p><span class="faux-tip">bitly Clicks</span></p>
        </div>
        <div class="span two data-stat">
            <i class="text">85M</i>
            <p><span class="faux-tip">Tumblr Posts</span></p>
        </div>
        <div class="span two">&nbsp;</div>
    </div>
</div>

次の CSS は何も選択しません。

DIV.block.feature-callout-c#overview:nth-child(2) 
    DIV.row.number:nth-child(2) 
        DIV.span.two.data-stat:nth-child(1) 
            I.text 

これは次のことを行いますが：

DIV.block.feature-callout-c#overview:nth-child(2) 
    DIV.row.number:nth-child(2) 
        DIV.span.two.data-stat:nth-child(2) 
            P 
                SPAN.faux-tip  

誰かがここで何が起こっているのか説明してもらえますか?

これは、CSS を使用するのに最適ではありません。要素ごとに一意のセレクターが必要な非常に特殊なニーズがあります。