css3有没有除第一个子元素以外的元素的选择器

html-css017

css3有没有除第一个子元素以外的元素的选择器,第1张

有的，包括：“:not(:first-child)”、“:nth-child(n+2)”两种方式。

1、:not(:first-child)：其中，E:not(s)表示匹配所有不匹配简单选择符s的元素E，E:first-child匹配同级兄弟元素中的第一个E元素。

2、:nth-child(n+2)：其中nth-child表示第几个son，n+2表示从第二个开始(即所有的n都是取从0开始的自然数)。

扩展资料：

css3中相关的选择器：

1、E:root ：匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

2、E:nth-child(n)：匹配父元素中的第n个子元素E

3、E:nth-last-child(n)：匹配父元素中的倒数第n个结构子元素E

4、E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E

5、E:nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素E

6、E:last-child：匹配父元素中最后一个E元素

7、E:first-of-type：匹配同级兄弟元素中的第一个E元素

8、E:only-child：匹配属于父元素中唯一子元素的E

9、E:only-of-type：匹配属于同类型中唯一兄弟元素的E

参考资料来源：百度百科-css3

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>

:first-child和:last-child

用来选择某个元素的第一个子元素。

//输入ul li:first-child

//输入ul li:last-child

刚刚有个这方面的视频，视频的系列名称叫做 《Buid New World》 里面的第八集是讲CSS3 选择器的，有机会看看吧