CSS3的 nth 元素选择器
CSS3的元素选择器
W3C上关于下列的元素选择器的解释让人有些抓脑，有些不知所云。下面就用比较通俗的形式来解释比较绕的那几个元素选择器。
带有 child 和 type 的元素选择器
| 带有 child | 带有 type |
|---|---|
| only-child | only-of-type |
| first-child | first-of-type |
| last-child | last-of-type |
| nth-child(n) | nth-of-type(n) |
| nth-last-child(n) | nth-last-of-type(n) |
:first-child 选择父元素的第一个元素
p:first-child 选择父元素的第一个子元素,并且是 p 标签的元素。注意：是第一个元素并且是 p 标签，而不是第一个 p 标签
:last-child 选择父元素的最后一个子元素
p:last-child 选择父元素的最后一个元素,并且是 p 标签的元素。注意：是最后一个元素并且是 p 标签，而不是最后一个 p 标签
:first-of-type 选择父元素中首个（第一次出现的）指定类型的子元素。
p:first-of-type 选择父元素中第一次出现的 p 标签（第一个 p 标签）
:last-of-type 选择父元素中最后的（最后一次出现的）指定类型的子元素
p:last-of-type 选择父元素中最后一次出现的 p 标签（最后一个 p 标签）
:only-of-type 选择父元素中唯一出现的（只出现过一次）的指定类型的子元素。父元素可以有多个子元素，但选择的是只出现过一次的指定类型的元素
p:only-of-type 选择父元素中只出现过一次的 p 标签。这个父元素中只有一个 p 标签，可以有很多个其他的标签
:only-child 选择父元素中只有一个子元素，并且这个元素是指定类型的标签。父元素只能有一个子元素
p:only-child 选择父元素中只有一个子元素，并且这个元素是 p 标签。
:nth-child(n) 选择父元素中的第 n 个子元素，并且第 n 个元素是指定类型的标签。
p:nth-child(2) 选择父元素中的第 2 个子元素，并且第 2 个元素 p 标签。注意：是第 2 个子元素并且是 p 标签，而不是第 2 个 p 标签
:nth-last-child(n) 选择父元素中的倒数第 n 个子元素，并且倒数第 n 个元素是指定类型的标签。
p:nth-last-child(2) 选择父元素中的倒数第 2 个子元素，并且倒数第 2 个元素 p 标签。注意：是倒数第 2 个子元素并且是 p 标签，而不是倒数第 2 个 p 标签
:nth-of-type(n) 选择父元素中第 n 次出现的指定类型的子元素
p:nth-of-type(2) 选择父元素中第 2 次出现的 p 标签。注：父元素中可以有 n 个 p 标签，但选择的就是众多 p 标签中的第二个，即第二个 p 标签。
:nth-last-of-type(n) 选择父元素中倒数第 n 次出现的指定类型的子元素
p:nth-last-of-type(2) 选择父元素中倒数第 2 次出现的 p 标签。注：父元素中可以有 n 个 p 标签，但选择的就是众多 p 标签中的倒数第二个。即倒数第二个 p 标签。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！