什么是结构伪类选择器
CSS 中的结构伪类选择器是根据 HTML 页面中元素之间的关系来定位 HTML 元素，从而减少对 HTML 元素的 id 属性和 class 属性的依赖。
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 |
| E:last-child | 作为父元素的最后一个子元素的元素E。与E：nth-last-child(1)等同 |
| E:root | 选择匹配元素E所在文档的跟元素。在HTML文档中，跟元素始终是html，此时该选择器与html类型选择器匹配的内容相同。 |
| E F:nth-child(n) | 选择父元素E的第N个子元素F。其中N可以是整数（1、2、3）、关键字（even、odd）、可以是公式（2n+1、-n+5） |
| E F:nth-last-child(n) | 选择元素E的倒数第N个子元素f。此选择器与E F:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中:nth-last-child(1)始终匹配的时最后一个元素，与:last-child等同 |
| E:nth-of-type(n) | 选择父元素内具有指定类型的第N个E元素 |
| E:nth-last-of-typy(N) | 选择父元素内具有指定类型的倒数第N个E元素 |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素，与:nth-of-type(1)等同 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同 |
| E:only-child | 选择父元素只包含一个子元素，且该子元素匹配E元素 |
| E:only-of-type | 选择父元素只包含一个同类型的子元素，且该子元素匹配E元素 |
| E:empty | 选择没有子元素的元素，而且该元素也不包含任何文本节点。 |
n 的注意点
- n 为：0、1、2、3、4、5、…
- 通过 n 可以组成常见公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1、odd |
| 找到前五个 | -n + 5 |
| 找到从第五个往后的 | n + 5 |
n的初始值为0
版权声明：本文为m0_51620667原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。