CSS 的后代伪类选择器用法浅析

CSS 的后代伪类选择器共五对,两种类型(我命名为:child 型与 type 型),分别是:

child 型 type 型
:first-child :first-of-type
:last-child :last-of-type
:only-child :only-of-type
:nth-child(n) :nth-of-type(n)
:nth-last-child(n) :nth-last-of-type(n)

两种类型的主要区别在于查找元素的顺序,child 型先查找元素位置,再查找元素类型;而 type 型则刚好相反,先找类型,后找位置。

下面部分将详述这五对选择器,两种类型之间的用法区别,用<p>元素作为目标元素。


第一个后代元素
p:first-child
先找到父元素的第一个后代元素,并且这个元素是<p>元素(第一个后代元素是<p>元素)。
p:first-of-type
先找到父元素的所有后代<p>元素,然后从中找出第一个(所有后代<p>元素中的第一个元素)。

示例代码与页面效果:

first_child_of_type


最后一个后代元素
p:last-child
先找到父元素的最后一个后代元素,并且这个元素是<p>元素(最后一个后代元素是<p>元素)。
p:last-of-type
先找到父元素的所有后代<p>元素,然后从中找出最后一个(所有后代<p>元素中的最后一个元素)。

示例代码与页面效果:

last_child_of_type


唯一后代元素
p:only-child
父元素只有一个后代元素,并且该元素是<p>元素(<p>元素是唯一的后代的元素
p:only-of-type
你元素可能有多个后代元素,但其中只有一个<p>元素(一个或多个后代元素只包含一个<p>元素)。

示例代码与页面效果:

only_child_of_type


自定义顺序位
p:nth-child(2)
先找到父元素的第二个后代元素,并且这个元素是<p>元素(第二个后代元素是<p>元素)。
p:nth-of-type(2)
先找到父元素的所有后代<p>元素,然后从中找出第二个(所有后代<p>元素中的第二个元素)。

示例代码与页面效果:

nth_child_of_type


自定义倒序位
p:nth-last-child(2)
先找到父元素的倒数第二个后代元素,并且这个元素是<p>元素(倒数第二个后代元素是<p>元素)。
p:nth-last-of-type(2)
先找到父元素的所有后代<p>元素,然后从中找到倒数第二个(所有后代<p>元素中的倒数第二个元素)。

示例代码与页面效果:

nth_last_child_of_type

发表评论

电子邮件地址不会被公开。 必填项已用*标注