CSS系列:伪类选择器小记

这篇文章距离上次修改已过199天，其中的内容可能已经有所变动。

伪类选择器是CSS中一个强大的功能，它允许我们对元素的某种特殊状态应用样式。这些状态可以基于内容，基于子元素，或者基于某些特定的动作。

:first-child选择器可以选择父元素的第一个子元素，并对其应用样式。




p:first-child {
  color: red;
}

:last-child选择器可以选择父元素的最后一个子元素，并对其应用样式。




p:last-child {
  color: red;
}

:nth-child(n)选择器可以选择父元素的第n个子元素，并对其应用样式。




p:nth-child(2) {
  color: red;
}

:nth-last-child(n)选择器可以选择父元素的倒数第n个子元素，并对其应用样式。




p:nth-last-child(2) {
  color: red;
}

:only-child选择器可以选择是父元素的唯一子元素的元素，并对其应用样式。




p:only-child {
  color: red;
}

:first-of-type选择器可以选择父元素下同类型的第一个元素，并对其应用样式。




p:first-of-type {
  color: red;
}

:last-of-type选择器可以选择父元素下同类型的最后一个元素，并对其应用样式。




p:last-of-type {
  color: red;
}

:nth-of-type(n)选择器可以选择父元素下同类型的第n个元素，并对其应用样式。




p:nth-of-type(2) {
  color: red;
}

:nth-last-of-type(n)选择器可以选择父元素下同类型的倒数第n个元素，并对其应用样式。




p:nth-last-of-type(2) {
  color: red;
}

:only-of-type选择器可以选择是父元素下同类型的唯一元素，并对其应用样式。




p:only-of-type {
  color: red;
}

:empty选择器可以选择没有任何子元素的元素（包括文本节点），并对其应用样式。




p:empty {
  display: none;
}

:target选择器可以选择当前活动的锚点元素，并对其应用样式。




p:target {
  color: red;
}

:enabled选择器可以选择每个启用的表单元素，并对其应用样式。




input:enabled {
  border: 1px solid #ccc;
}