这篇博客详细介绍了CSS3中的结构伪类选择器，包括`:first-child`、`:last-child`、`:nth-child(n)`和`:nth-of-type(n)`等。内容涵盖了这些选择器的使用方法和区别，强调了`:nth-child()`与`:nth-of-type()`在匹配元素时的差异，并提醒在编写CSS样式时避免过度依赖ID选择器。
1.非常用复合选择器
element1 + element2
- 离element1最近的elment2标签.
element1~element2
跟在element1后面的同一个父级标签. 认标签,不认类名哦
前面我们学到的是 css2.0 现在下面开始介绍 css3
2.结构(位置)伪类选择器(css3)
-
:first-child :选取属于其父元素的首个子元素的指定选择器
-
:last-child :选取属于其父元素的最后一个子元素的指定选择器
-
:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
-
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或简单公式或odd(奇数)或even(偶数) -
nth-of-type(n): 匹配同类型中的第n个同级兄弟元素 n可以是一个数字，一个关键字，或者一个公式
-
:first-of-type: 匹配同类型中的第一个同级兄弟元素 没有() 参数
-
:last-of-type: 匹配同类型中的最后一个同级兄弟元素 没有() 参数
-
最低0.47元/天 解锁文章
扫一扫
1496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
