css - 除第一个元素外的类的 Css 选择器

Question

我有以下div：

<div id="container">
    <div class="different_class"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

我想为所有带有（.child）的子div应用边框，除了第一个。所以最后除了 (.differ_class) 和 (.child:eq(0)) 之外的所有子 div （我不想在真正的问题中使用 nth-child，因为我可能没有 .different_class div）将拥有边界。

我认为解决方案可能是使用 :not() 选择器，但我不太确定如何。谢谢'

Answer 1

试试这个http://jsfiddle.net/5XuE3/

#container div.child + div.child
{
border: solid 1px black;
}

Answer 2

.child { some css }
.child:first-child { other styling }

编辑

为什么不工作？检查这个jsfiddle。

Answer 3

+在这种情况下，选择器将起作用，因为所有具有child类的元素都在一起，但如果另一个不同的元素（或具有另一个类）在它们之间，它将不起作用。

发生这种情况是因为选择器将匹配紧跟在另一个之后+放置的所有元素。div.child

例子：

#container div.child + div.child{
  border: 1px solid;
}

<div id="container">
    <div class="different_class">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
    <div class="different_class">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
</div>

为避免这种情况，我们可以使用选择器，它将~匹配所有前面的元素div.child，而不是紧跟在它后面的元素。所以它不会与第一个div与childclass 匹配，而是会与 class 的其余部分匹配，divs而不child考虑其余元素。

例子：

#container div.child ~ div.child{
  border: 1px solid;
}

<div id="container">
    <div class="different_class">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
</div>