CSS选择器第n个子项

我在编写一个稍微复杂的CSS选择器时遇到了一些问题

我想选择一个“class”包含

'btn-group'

，但不包含

'open'

所以我有点像

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

现在的问题是，大约有5-6个元素符合上述条件。但我想从中选择第一个。我该怎么做呢

---

希望使用第n个子项进行操作。

关于：

div[class*='btn-group']：非（.open）：类型的第一个

[编辑]：如果您将

作为第一个孩子，则此技巧不起作用。。。（正如下面@Jukka所解释的）基于JS的技巧会奏效，但：

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

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

---

关于：

div[class*='btn-group']：非（.open）：类型的第一个

[编辑]：如果您将

作为第一个孩子，则此技巧不起作用。。。（正如下面@Jukka所解释的）基于JS的技巧会奏效，但：

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

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

像这样试试

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

使用此选项可以选择第一个子项

像这样试试

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

使用此选项可以选择第一个子项

---

你不能。CSS选择器不能那样使用。但是，如果您提供更具体的HTML上下文（包括

div

元素的容器和标记遵循的模式描述），可能有一种方法可以在某些假设下工作

---

特别是，

：n个子元素

和

：n个类型

仅测试元素是其父元素的第*n*n个子元素还是其同类的第*n*n个子元素。它没有考虑到例如课程；不是“类的第n个”选择器。

您不能。CSS选择器不能那样使用。但是，如果您提供更具体的HTML上下文（包括

div

元素的容器和标记遵循的模式描述），可能有一种方法可以在某些假设下工作

---

特别是，

：n个子元素

和

：n个类型

仅测试元素是其父元素的第*n*n个子元素还是其同类的第*n*n个子元素。它没有考虑到例如课程；不是“类的第n个”选择器。

它是否工作取决于上下文，但通常不工作，因为

：类型的第一个

只测试元素是否是其父元素的第一个子元素。足够正确-因此我添加了jQuery替代项。它是否工作取决于上下文，但通常不工作，因为

：first of type

只测试元素是否是其父元素的第一个子元素。