CSS结构伪类选择器
Posted yuh_c
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS结构伪类选择器相关的知识，希望对你有一定的参考价值。
| 序号 | 选择器 | 功能描述 |
示例
| 备注 |
| 1 | E:root | 选择匹配元素E所在文档的根元素 |
|
|
|
2 |
E:nth-child(n) | 选择在其父类中的第N个位置的匹配E的子元素 |
p:nth-child(2)：
|
tr:nth-child(3)匹配所有表格里拍第三行的tr元素；
tr:nth-child(2n+1)=tr:nth-child(odd)匹配所有变革的奇数行；
tr:nth-child(2n)=tr:nth-child(even)匹配所有变革的偶数行；
|
| 3 | E:nth-last-child(n) | 选择所有在其父元素中倒数第n个位置的匹配E的子元素 |
|
|
| 4 | E:nth-of-type(n) | 选择所有在其父类元素中的同类型的第n个位置的匹配E的子元素 |
p:nth-of-type：
|
|
| 5 | E:nth-last-of-type(n) |
选择所有在其父类元素中的同类型倒数第n个位置的匹配E的子元素
|
|
|
| 6 | E:last-child | 选择位于其父元素中的最后一个位置，且匹配E的子元素 |
| 如果父元素的最后一个元素不是E则样式不起作用 |
| 7 | E:first-of-type | 选择在其父元素中匹配E的第一个同类型的子元素 |
|
|
| 8 | E:only-child | 选择其父元素只含有一个子元素，且该子元素匹配E。 | p:only-child | 匹配:<div><p></p></div> 不匹配:<div><h1></h1><p></p></div> |
| 9 | E:only-of-type |
选择其父元素只含有一个同类型的子元素，且该子元素匹配E。
| p :only-of-type |
匹配:<div><p></p></div>
匹配: <div><h1></h1><p></p></div> 不匹配： <div><p></p><p></p></div> |
| 10 | E:empty | 选择匹配E的元素，且该元素不含有子节点 |
|
|
以上是关于CSS结构伪类选择器的主要内容，如果未能解决你的问题，请参考以下文章