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的技巧将会起作用，tho：

$("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个”选择器。