CSS Selector nth-child

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