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）将有边界。

我认为解决方案可能是使用：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之后立即放置的所有元素。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

为了避免这种情况，我们可以使用~选择器，它将匹配前面 <{1}}，不必要的所有元素它会在后立即。因此，它与第一个div.child与div类不匹配，但会将child的其余部分与divs类匹配，而不考虑其余元素。

示例：

＆＃13;

child

＆＃13;

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

＆＃13;

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

3 个答案: