2024年04月07日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
1. :first-child 匹配每个父元素下的第一个子元素
eg:
.uls :first-child{ color: red; }
匹配 .uls 下第一个子元素
eg:
.uls li :first-child{ color: red; }
匹配 .uls 下第一个子元素 li ,此时 li 必须是父元素下的第一个子元素
注: :first-child 等价于 :nth-child(1) 都是匹配父元素下的第一个子元素
2. :last-child 匹配每个父元素下的最后一个子元素
eg:
.uls :last-child{ background: red; }
匹配 .uls 下最后一个子元素
eg:
.uls li :last-child{ background: red; }
匹配 .uls 下的最后一个子元素li,此时 li 必须是父元素下最后一个子元素
注: :last-child 等价于 :nth-last-child(1) 都是匹配父元素下的最后一个子元素
3. :nth-child(n) 匹配父元素下的第n个子元素,n从0开始,但是一般从第一个子元素找
eg:
.uls :nth-child(3){ color: red; }
匹配父元素下的第3个子元素
4. :nth-child(2n) 匹配父元素下的第偶数个子元素
eg:
.tab tr :nth-child(2n){ background: red; }
匹配 .tab 下的第偶数个tr元素
注: :nth-child(2n) 等价于 :nth-child(even)
5. :nth-child(2n+1) 匹配父元素下的第奇数个子元素
eg:
.tab tr :nth-child(2n+1){ background: red; }
匹配 .tab 下的第奇数个 tr 元素
注: :nth-child(2n+1) 等价于 :nth-child(odd)
6. :nth-last-child(n) 匹配父元素下倒数第n个子元素
eg:
.uls :nth-last-child(2){ color: red; }
匹配父元素下的倒数第二个子元素
7. :first-of-type 匹配父元素下指定类型的第一个子元素
eg:
.uls li :first-of-type{ background: red; }
匹配 .uls 下 li 这种类型的第一个子元素
8. :last-of-type 匹配父元素下指定类型的最后一个子元素
eg:
.uls li :last-of-type{ background: red; }
匹配 .uls 下的 li 这种类型的最后一个子元素
9. :nth-of-type(n) 匹配父元素下指定类型的第n个子元素
eg:
.uls li :nth-of-type(2){ background: red; }
匹配 .uls 下的 li 这种类型的第二个子元素
10. :nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素
eg:
.uls li :nth-last-of-type(2){ background: red; }
匹配 .uls 下 li 这种类型的倒数第二个子元素
11. :noly-child 匹配父元素下唯一一个子元素
eg:
.box :noly-child{ background: red; }
匹配 .box 下唯一一个子元素
12. :noly-of-type 匹配父元素下指定类型的唯一一个子元素
eg:
.box a :noly-of-type{ background: red; }
匹配 .box 下 a 这种类型的唯一一个子元素
13. :empty 匹配内容为空的元素(回车换行,空格都不能有)
14. :root 匹配网页根元素html
鹏仔小扩展:
匹配父元素下包含 x 在内的大于 x 的子元素
:nth-child(n+x)
匹配父元素下包含 x 在内的小于 x 的子元素
:nth-child(-n+x)
本文链接:http://so.lmcjl.com/news/1344/