CSS3 选择器nth-child()问题，谢绝抢答，求懂的大神。

html-css024

CSS3 选择器nth-child()问题，谢绝抢答，求懂的大神。,第1张

nth-child()括号里面的顺序号是指“兄弟姐妹”之间的序号，并不是整个家族不分辈分的序号。在你的代码中，第一个div和第二个div是兄弟关系，它们的序号是1和2，所以它们分别获得了第1个和第2个样式，而3-1和3-2这两个div则是前两个div的“侄子”（它们外面所套的那个div则是它们的“父亲”），所以它们的序号会重新分配为1和2，并分别匹配第1和第2个样式。听懂没有？

改成这样就行：

12345<style>body>div:nth-child(1) {background:#78caf1

/*蓝*/}body>div:nth-child(2) {background:#ffc04c

/*橙*/}div>div:nth-child(1) {background:#33bf51

/*绿*/}</style>

CSS中的>是代表选择器的层级关系为直接子级。如下示例代码：

<body>

    <div class="wrap"></div>

    <div class="content">

        <div class="wrap"></div>

    </div>

</body>

如上边这个html代码结构。

body .wrap{}  这样写控制的就是body里边的所有class为wrap的元素，包括所有子孙级。

body >.wrap{} 这样写就只会控制直接子级，content里边的wrap就不会受控制。

这个不是css3的是css2的标准

E>F

子选择符：选择所有作为E元素的子元素F

div >div {}

意思就是 父亲div只管对应儿子的div 儿子里边的孙子div不管的