一、层次选择器
1.后代选择器(包含选择器)
语法:E F 匹配E元素下所有子元素F
2.子选择器
语法:E>F 匹配E元素下第一级子元素F
3.相邻兄弟选择器
语法:E+F 匹配E元素后面紧邻的F元素(有且仅有一个)
4.通用兄弟选择器
语法:E~F 匹配E元素后面所有F元素(有可能匹配到多个)
二、结构伪类选择器
1. :first-child 匹配父元素下第一个子元素
注::first-child <=> :nth-child(1)
都是匹配父元素下第一个子元素
2. :last-child 匹配父元素下最后一个子元素
注::last-child <=> :nth-last-child(1)
都是匹配父元素下最后一个子元素
3. :nth-child(n) 匹配父元素下第n个子元素
4. :nth-last-child(n) 匹配父元素下倒数第n个子元素
5. :nth-child(2n+1) <=> :nth-child(odd) 匹配父元素下第奇数个子元素
6. :nth-child(2n) <=> :nth-child(even) 匹配父元素下第偶数个子元素
7. :first-of-type 匹配父元素下指定类型的子元素中的第一个
8. :last-of-type 匹配父元素下指定类型的子元素中的最后一个
9. :nth-of-type(n) 匹配父元素下指定类型的子元素中的第n个
10. :nth-last-of-type(n) 匹配父元素下指定类型的子元素中的倒数第n个
11. :only-child 匹配父元素下唯一一个子元素
12. :only-of-type 匹配父元素下指定类型的子元素中唯一一个
13. :empty 匹配内容为空的元素(空格,换行都不能有)
14. :root 匹配根元素html
css3新增的结构伪类,层次选择器及其含义
最新推荐文章于 2023-03-26 23:42:12 发布