CSS選擇器第n個孩子

Question

我正面臨着編寫一個稍微複雜的CSS選擇器的問題。

我要選擇具有「類」包含'btn-group'一個div，但不'open'

所以我有這樣的事情;

div[class*='btn-group']:not([class='open']) 

現在的問題是，有大約5-6個元素符合上述條件。但我想選擇第一個。我該怎麼做呢？

寧願使用nth-child做..

Answer 1

什麼：div[class*='btn-group']:not(.open):first-of-type？

[編輯]：如果你有<div class="btn-group open"></div>作爲第一個孩子...（如下面@Jukka解釋）基於JS-招會的工作，壽這招不起作用：

$("div[class*='btn-group']").not(".open").first() 
    .css({...}); 

    // OR add a class 
    // .addClass("class"); 

http://jsfiddle.net/teddyrised/LdDCH/

Answer 2

嘗試這樣

div [class*='btn-group']:not([class='open']):nth-child(1) { 
    color:Red; 
} 

使用此您可以選擇的第一個孩子

Working Fiddle

Answer 3

你不行。不能以這種方式使用CSS選擇器。但是，如果您提供更具體的HTML上下文（包括div元素的容器以及該標記遵循的模式的描述），則可能有某種方法在某些假設下可用。

特別地，:nth-child和:nth-of-type僅測試該元素是否爲其父類型的第* n *子或第n *子類。它確實需要而不是。課程考慮在內;這不是「一流的」選擇者中的第n個。