html5伪类选择器,Css选择器-结构性伪类选择器

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)

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓