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個孩子產生奇數結果

回答

相關問題