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应用一个边框，除了第一个。因此最终除了(.different_class)和(.child:eq(0))（我不想使用nth-child，因为在实际问题中我可能没有.different_class div），所有的子div都将有边框。

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

- Alvaro

---

“:eq()”不是CSS选择器。它是jQuery的一部分。 - BoltClock

谢谢，我一直对此感到很困惑。 - Alvaro

Answer 1

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

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

- user1289347

Answer 2

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

编辑

为什么不起作用？请检查这个jsfiddle。

- Savas Vedova

---

这个不起作用，“所以最终所有子div，除了(.different_class)和(.child:eq(0))”无论如何还是谢谢。 - Alvaro

@Alvaro请查看更新。虽然我现在看到你没有要求nth-child，但它仍然有效。不过只在Chrome中测试过。 - Savas Vedova

你的fiddle中没有.different_class！ - BoltClock

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之前的元素，而不一定是紧接着它的元素。因此，它不会匹配第一个带有child类的div，但会匹配其余带有child类的divs，而不考虑其他元素。

例如：

#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>

- Francisco Romero