Question

我们有一个HTML代码段

<div id="parent">
    <div id="ch1"></div>
    <div id="ch2"></div>
    <div id="ch3"></div>
    ....
    <div id="ch1234"></div>
</div>

那么如何编写一个CSS选择器，它将特定样式应用于div#parent除div#ch1之外的任何子项？

Answer 1

使用儿童和兄弟组合器：

#parent > div + div

其中div + div表示任何div跟随另一个~，这将排除第一个孩子。

备选方案包括+代替#parent > div ~ div：

#parent > div:nth-child(n+2)
#parent > div:not(#ch1)

或者，使用CSS3伪类（在IE8及更旧版本中不支持，如果这对你很重要）：

{{1}}

Answer 2

你应该申请：

#parent div:nth-child(n+2) {
 ...
}

除了第一个之外，这将适用于每一个李，无论你有多少李。

示例http://jsfiddle.net/vzyWq/

顺便说一下，对于这些情况http://nth-test.com/

，这是一个不错的网站

Answer 3

您需要使用：not selector：

#parent :not(#ch1) {
  styles
}

https://developer.mozilla.org/en/docs/Web/CSS/:not

Answer 4

不使用任何id，如大多数答案所示.....只需使用parent ID ...您可以这样使用它：

#parent div:nth-child(1) ~ div
{
  /*design here*/
}

working demo

定位div的第一个孩子parent，然后使用~为不是第一个孩子的孩子使用css设计!!

Answer 5

只需添加要添加更改的类并定义该类

即可

    <div id="parent">
        <div id="ch1"></div>
        <div class='myTest' id="ch2"></div>
        <div class='myTest' id="ch3"></div>
        ....
        <div class='myTest' id="ch1234"></div>
    </div>

.myTest{color:red}

希望这有帮助。

将样式应用于除第一个之外的任何子元素的选择器

5 个答案: