这次给大家带来CSS的子代选择符，使用CSS的子代选择符的注意事项有哪些，下面就是实战案例，一起来看一下。
后代选择符用于选取一个标签的所有后代，包括子代和孙辈等；而子代选择符只选取指定父辈的子代标签（指定标签元素的第一代子元素）。
子代选择符使用一个额外的符号（尖括号> ）表明两个元素之间的关系。
例如：body>h1 选取的是
标签里的所有第一代
标签。
注意事项的关系图
HTML代码
body里面的h1标题
p里面的h2
p里面的p标签，p标签里面有一个加粗的链接
body里面的h2标题
登录后复制
弄懂上面的结构之后，可以试试下面代码：
CSS代码
body>h2 { color: orange;}
登录后复制
上面HTML代码里面，一共有2个
标签，但只有一个子代的
，另一个
是在
里面的，所以上面的css代码只作用在第一个
标签。
下面是比较好玩的子选择符
注意事项
选取第一个子标签。
CSS代码
h2:first-child { color: orange;}
登录后复制
这个选择符的作用是：先找到网页中所有
标签，通过
标签找到其父元素，再判断
标签在其父元素中是否排第一个。
这里因为
的第一个标签是
，所以的子元素
没被样式作用到。
因为
里的
是
的第一个子元素，所以
里的
变成了橙色字。
:last-child
这个选择符与 :first-child 选择符的作用类似，不过选取的是一个元素的最后一个子代。
CSS代码
li:last-child { font-size: 2em;}
登录后复制
可以看到，“小列表C”和“列表3（带链接）”的字号变大了。因为这两项都是被指定的最后一项。
:only-child
选取某个元素唯一的子代。
HTML代码
第一个p的p
第二个p的第一个p
第二个p的第一个a
登录后复制
CSS代码
p:only-child { color: orange;}
登录后复制
上述样式只作用在第一个
的
元素。第二个
里因为不止
元素，还有注意事项
立即学习“前端免费学习笔记（深入）”；
注意事项
- 1
- 2
- 3
- 4
- 5
- 6
- 7
登录后复制登录后复制
li:nth-child(odd) { background: pink;}li:nth-child(even) { background: teal;}
登录后复制
- a
- 1
- 2
- 3
- 4
- 5
- 6
- 7
登录后复制登录后复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
登录后复制登录后复制
li:nth-child(4) { background: orange;}
登录后复制
- a
- 1
- 2
- 3
- 4
- 5
- 6
- 7
登录后复制登录后复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 0
登录后复制登录后复制
li:nth-child(3n) { background: orange;}
登录后复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 0
登录后复制登录后复制
li:nth-child(3n+2) { background: orange;}
登录后复制
li:nth-child(3n+5) { background: orange;}
登录后复制
li:nth-child(-n+3) { background: orange;}
登录后复制
li:nth-child(n+4) { background: orange;}
登录后复制
以上就是CSS的子代选择符的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2899452.html
