|HTML的应用技巧之新增结构伪类选择器

文章图片

文章图片

文章图片

文章图片

上节课我们介绍了css样式新增的属性选择器，接下来我们讲讲剩下的两种选择器：结构伪类选择器和伪元素选择器。今天我们先详细讲讲新增结构伪类选择器：
1.选择第一个子元素的语法：:first-child
2.选择最后一个子元素的语法：:last-child
3.选择任意子元素的语法：:nth-child(n) 。其中括号中的n可以放以下三种值。1）数字。不同的数字代表着第几个子元素，如果放的是n则代表，全部的子元素。

2）关键字。当放的关键词为even时代表着选择所有的偶数子元素；当放的关键词为odd时代表着选择所有的奇数子元素。

3）公式。每个公式代表的含义如下图。

4.选择第一个子元素，语法如下：:first-of-type
5.选择最后一个子元素，语法如下：:last-of-type 。
6.选择任意子元素，语法如下：:nth-of-type(n)
7.nth-of-type和nth-child的区别【|HTML的应用技巧之新增结构伪类选择器】nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。相同之处是，两者都是找到元素之后再与前面的选择符进行匹配，这里的匹配方式是一样的。

|HTML的应用技巧之 新增结构伪类选择器

|HTML的应用技巧之新增结构伪类选择器