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个。