Html CSS选择器第n个子项产生奇数结果

我在使用CSS

nth child

选择器时遇到一些奇怪的问题

我有以下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>

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  

而这个是：

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

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的最佳选择，我有一个非常特殊的需求，需要为每个元素指定一个唯一的选择器

div.span.two.data stat:nth child（1）的每个部分在一个大的“和”检查中匹配它要检查的元素的一部分

：第n个子元素（x）

查找父元素的第x个子元素

因此

div.span.two.data stat:nth child（1）

的意思是“找到所有元素，其中标记名为div，类'contains'，类'two'，类'data stat'，并且是其父级的第一个子级”

---

您试图与

DIV.span.two.data stat:nth child（1）

匹配的

DIV.row.number:nth child（2）

的第一个子级没有类数据统计，因此不匹配。

DIV.span.two.data stat:nth child（1）的每个部分都与它要检查的元素的一部分匹配，在一个大范围内“和”检查

：第n个子元素（x）

查找父元素的第x个子元素

因此

div.span.two.data stat:nth child（1）

的意思是“找到所有元素，其中标记名为div，类'contains'，类'two'，类'data stat'，并且是其父级的第一个子级”

---

DIV.row.number:nth child（2）

，您正试图与

DIV.span.two.data stat:nth child（1）

，的第一个子级没有类数据stat，因此不匹配。

尝试添加“n”以便：

nth child（2n）

@Adsy如果这样做有效，它将返回两个元素。我只需要一个（第一个）.DIV.span.two.data stat:first child？您将第一个

.span.two.data stat

作为

行.number

的第二个子项，但是第一次尝试尝试选择第一个子项（第n个子项基于1，而不是基于0）是的，这就是我的意思，

第n个子项（1）

失败，因为它尝试选择第一个子元素，但第一个子元素是

请尝试添加“n”，因此：

第n个子元素（2n）

@Adsy如果这样做有效，它将返回两个元素。我只需要一个（第一个）.DIV.span.two.data stat:first child？您将第一个

.span.two.data stat

作为

行.number

的第二个子项，但是第一次尝试尝试选择第一个子项（第n个子项基于1，而不是基于0）是的，这就是我的意思，

第n个子项（1）

失败，因为它尝试选择第一个子项，但第一个子项是