这次给大家带来CSS的子代选择符，使用CSS的子代选择符的注意事项有哪些，下面就是实战案例，一起来看一下。
后代选择符用于选取一个标签的所有后代，包括子代和孙辈等；而子代选择符只选取指定父辈的子代标签（指定标签元素的第一代子元素）。
子代选择符使用一个额外的符号（尖括号> ）表明两个元素之间的关系。
例如：body>h1 选取的是
标签里的所有第一代
标签。
HTML标签的关系图
HTML代码
弄懂上面的结构之后，可以试试下面代码：
CSS代码
body>h2 { color: orange;}
上面HTML代码里面，一共有2个
标签，但只有一个子代的
，另一个
是在
是在
里面的，所以上面的css代码只作用在第一个
标签。
下面是比较好玩的子选择符
:first-child
选取第一个子标签。
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;}
上述样式只作用在第一个
的
元素。第二个
里因为不止
元素，还有元素，所以第二个
的
元素不会被上述样式影响。
立即学习“前端免费学习笔记（深入）”；
这个选择符比较难理解。仅当指定的标签是另一个标签的唯一子代时，这个选择符定义的样式才有效。也就是说，子代中只有一个指定的标签还不行，如果指定的标签有其他同辈标签，这个选择符定义的样式就会失效。
:nth-child
这个选择符用法比较复杂，不过也特别有用。
这个选择符可以轻易地为表格中相隔的行、列表中相隔两个项目的项目或相隔其他数目的子代元素定义样式。
这个选择符需要一个值，用于确定选取哪些子代。
其中最简单的值是关键字，即odd和even。
odd用于选取奇数子代元素。
even用于选取偶数子代元素。
HTML代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
CSS代码
li:nth-child(odd) { background: pink;}li:nth-child(even) { background: teal;}
第一个子元素的下标是 1。
需要注意的是，如果在第一个
之前还有其他元素，那第一个的下标就不是1了。
比如
HTML代码
- a
- 1
- 2
- 3
- 4
- 5
- 6
- 7
这时的效果是
li:nth-child(odd) 的意思是找到
元素的父元素，通过父元素来检测每一个的下标的奇偶。
因为
的第一个元素是，第二个元素才是。也就是说，第一个的下标是2，所以第一个下标赋的样式是绿色的背景。
使用上面的方法可以让表格里的各行交替使用不同的样式特别简单。不过，:nth-child() 还有一些更妙更强大的用法。
可以给 :nth-child() 指定一个数字，精确选择某个子代。比如说要让第4个
的背景色改成橙色。
HTML代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
CSS代码
li:nth-child(4) { background: orange;}
同样的，这里的 li:nth-child(4) 的意思，是找到
标签的父元素，然后查找父元素的第4个子元素。
如果HTML代码是下面这样，CSS代码不变的情况下。
HTML代码
- a
- 1
- 2
- 3
- 4
- 5
- 6
- 7
效果就会变成这样：
会选中第3个
。因为第3个在其父元素里面是排第4的。
如果想每隔2个项目选中第三个项目，可以在数字后面加上字母n。
HTML代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 0
CSS代码
li:nth-child(3n) { background: orange;}
每当遇到3的整数倍的那个元素，就会应用规定的样式。
如果想从第二个子代元素开始算起，选取每隔2个元素的第三个子代元素。可以在3n后面加个2。
HTML代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 0
CSS代码
li:nth-child(3n+2) { background: orange;}
如果想从第5个开始算起，每隔2个元素的第三个子代元素更改样式。
CSS代码
li:nth-child(3n+5) { background: orange;}
如果想反向遍历，n前面的倍数就要修改成负数。
CSS代码
li:nth-child(-n+3) { background: orange;}
意思是：从列表的第三个条目算起，选取在此之前的每个条目。
如果想从第4个元素开始，往下选取所有元素。可以这样写：
CSS代码
li:nth-child(n+4) { background: orange;}
以下是子代选择符总览表
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
CSS的定位属性详解
css3如何做出小于一像素的细线
以上就是CSS的子代选择符的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609194.html
微信扫一扫 
支付宝扫一扫 
