Question

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

以下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的最强最佳我有一个非常具体的需求，需要为每个元素提供一个唯一的选择器。

Answer 1

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

:nth-child(x)找到一个元素，它是父元素的第x个子元素。

所以div.span.two.data-stat:nth-child(1)意思是“找到标签名称为div的所有元素，并且类包含'并且类'包含'并且具有类'data-stat'并且是第一个孩子它的父母“。

您尝试与DIV.row.number:nth-child(2)匹配的DIV.span.two.data-stat:nth-child(1)的第一个孩子没有类data-stat，因此不匹配。

CSS选择器nth-child产生奇怪的结果

1 个答案: