请阐述CSS3新增伪类举例？

CSS面试题 5月前 0 28

CSS3 引入了许多新的伪类，这些伪类提供了更加强大的选择器功能，使得我们可以更加方便地选择到特定的元素。以下是一些常见的CSS3新增伪类：

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

以上代码将会使得每个父元素的第二个  元素的文本颜色为红色。

:nth-last-child(n): 这个伪类的作用与 :nth-child(n) 类似，但是它是从后往前计数的。例如，p:nth-last-child(1) 会选取每个父元素下的最后一个  元素。
:last-child: 选取每个父元素的最后一个子元素。例如，p:last-child 会选取每个父元素的最后一个  元素。
:first-of-type: 选取父元素的第一个特定类型的子元素。例如，p:first-of-type 会选取每个父元素的第一个  元素。
:last-of-type: 选取父元素的最后一个特定类型的子元素。例如，p:last-of-type 会选取每个父元素的最后一个  元素。
:nth-of-type(n): 选取父元素的第n个特定类型的子元素。例如，p:nth-of-type(2) 会选取每个父元素的第二个  元素。
:nth-last-of-type(n): 这个伪类的作用与 :nth-of-type(n) 类似，但是它是从后往前计数的。例如，p:nth-last-of-type(1) 会选取每个父元素下的最后一个  元素。
:only-child: 选取父元素下唯一的子元素。例如，如果一个元素下只有一个  元素，那么 p:only-child 就可以选取到这个  元素。
:only-of-type: 选取父元素下唯一的特定类型的子元素。例如，如果一个元素下只有一个  元素，那么 p:only-of-type 就可以选取到这个  元素。
:empty: 选取不包含子元素或者文本的元素。

以上就是CSS3新增的一些伪类，它们使得我们能够更加灵活地选择到页面上的特定元素。