CSS 中功能相似伪类间的区别

导读：

CSS3 中有许多伪类选择器，其中一些伪类选择器的作用近似却又不完全一样，下面我们就来看一看到底有什么不一样。

1、:only-child 与 :only-of-type

测试的代码：

<div>
	<p>something</p>
</div>
<div>
	<div>other something</div>
	<p>something</p>
</div>

• :only-child 是指匹配属于父元素中唯一子元素的元素。设置 p:only-child { background-color:#00ff00; } 后表现为：

  something

  other something

  something

• :only-of-type是指匹配指定元素的父元素中唯一相同类型的子元素(该父元素可以有很多子元素，而与指定匹配的元素属于同一种类型的子元素是唯一的，则为其设定样式)。设置 p:only-of-type { background-color:#00ff00; } 后表现为：

  something

  other something

  something

2、:first-child 与 :first-of-type

测试的代码：

<div>
	<p>something</p>
	<div>other something</div>
</div>
<div>
	<div>other something</div>
	<p>something</p>
</div>

• :first-child 是指匹配的对象是其所在的父元素的第一个元素。设置 p:first-child { background-color:#00ff00; } 后表现为：

  something

  other something
  other something

  something

• :first-of-type 是指匹配的对象是其所在的父素的第一个相同类型元素。设置 p:first-of-type { background-color:#00ff00; } 后表现为：

  something

  other something
  other something

  something

3、:last-child 与 :last-of-type 可以参考 :first-child 与 :first-of-type 的思路

4、:nth-child(n) 与 :nth-of-type(n)

测试的代码：

<div>
	<div>other something</div>
	<p>something</p>
	<p>something</p>
	<p>something</p>
</div>

• nth-child(n) 是指匹配的对象是其所在的父元素的第 n 个元素。设置 p:nth-child(n) { background-color:#00ff00; } 后表现为：
  • 当 n 为 1(数字) 时：没有被选中的元素。
  • 当 n 为 2(数字) 时：
    other something

    something

    something

    something

  • 当 n 为 n+3(公式) 时：
    other something

    something

    something

    something

  • 当 n 为 -n+3(公式) 时：
    other something

    something

    something

    something

  • 当 n 为 2n(公式) 时：
    other something

    something

    something

    something

  • 当 n 为 2n+1(公式) 时：
    other something

    something

    something

    something

• tips:上面中的 n 的取值可以是数字，一个关键字，一个公式(此时 n 是一个从0开始的计数器）。当 n 取值 -n+2 表示小于等于2；当 n 取值 n+2 表示大于等于2；当 n 取值 2n 表示取偶数，也可以用 even 代替；当 n 取值 2n-1 表示去奇数，也可以用 odd 代替。
• nth-of-type(n) 是指匹配的对象是其所在的父素的第 n 个相同类型元素。设置 p:nth-of-type(n) { background-color:#00ff00; } 后表现为：
  • 当 n 为 1(数字) 时：
    other something

    something

    something

    something

  • 当 n 为 2(数字) 时：
    other something

    something

    something

    something

  • 当 n 为 n+3(公式) 时：
    other something

    something

    something

    something

  • 当 n 为 -n+3(公式) 时：
    other something

    something

    something

    something

  • 当 n 为 2n(公式) 时：
    other something

    something

    something

    something

  • 当 n 为 2n+1(公式) 时：
    other something

    something

    something

    something

5、:nth-last-child(n) 与 :nth-last-of-type(n) 可以参考 :nth-child(n) 与 :nth-of-type(n) 的思路

若是文中有什么错误，欢迎大家指正批评，愿与大家在问题的交流之中共同进步。愈激烈，愈深刻。