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 标签。