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

我在使用CSS nth-child选择器时遇到一些奇怪的问题。CSS选择器第n个孩子产生奇数结果

我有以下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的工作我有一个非常具体的需要，它需要每个元素的唯一选择器。

来源

2013-10-24 dtsn

尝试添加“n”所以：'nnth-child（2n）' – SaturnsEye

@Adsy虽然这个工作，它会返回两个元素。我只想要那个（第一个）。 – dtsn

DIV.span.two.data-stat：first-child？ –

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

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

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

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

来源

2013-10-24 15:37:10 choult

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

回答

相关问题