1

我在使用 CSSnth-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>

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

4

1 回答 1

4

div.span.two.data-stat:nth-child(1)在一个大的“和”检查中，每个部分都匹配它正在检查的元素的一部分。

:nth-child(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)没有类 data-stat ，因此不匹配。

于 2013-10-24T15:37:10.407 回答