css - CSS 选择器 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;
}

使用这个你可以选择第一个孩子

工作小提琴

Answer 3

你不能。CSS 选择器不能这样使用。但是，如果您提供更具体的 HTML 上下文（包括div元素容器和标记遵循的模式的描述），则可能有一种方法可以在某些假设下工作。

特别是，:nth-child仅:nth-of-type测试元素是其父元素的*n*th 子元素，还是同类中的*n*th 子元素。它不考虑例如类；这不是“类中的第 n 个”选择器。