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

时间:2014-01-24 13:06:16

标签: html css css-selectors

我们有一个HTML代码段

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

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

5 个答案:

答案 0 :(得分:2)

使用儿童和兄弟组合器:

#parent > div + div

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

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

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

或者,使用CSS3伪类(在IE8及更旧版本中不支持,如果这对你很重要):

{{1}}

答案 1 :(得分:1)

你应该申请:

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

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

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

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

,这是一个不错的网站

答案 2 :(得分:1)

您需要使用:not selector:

#parent :not(#ch1) {
  styles
}

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

答案 3 :(得分:1)

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

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

working demo

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

答案 4 :(得分:0)

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

即可
    <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}

希望这有帮助。