请阐述CSS3新增伪类举例?
CSS3 引入了许多新的伪类,这些伪类提供了更加强大的选择器功能,使得我们可以更加方便地选择到特定的元素。以下是一些常见的CSS3新增伪类:
:nth-child(n)
: 选取每个父元素下的第n个子元素。例如,p:nth-child(2)
会选取每个父元素下的第二个<p>
元素。
p:nth-child(2) {
color: red;
}
以上代码将会使得每个父元素的第二个 <p>
元素的文本颜色为红色。
:nth-last-child(n)
: 这个伪类的作用与:nth-child(n)
类似,但是它是从后往前计数的。例如,p:nth-last-child(1)
会选取每个父元素下的最后一个<p>
元素。-
:last-child
: 选取每个父元素的最后一个子元素。例如,p:last-child
会选取每个父元素的最后一个<p>
元素。 -
:first-of-type
: 选取父元素的第一个特定类型的子元素。例如,p:first-of-type
会选取每个父元素的第一个<p>
元素。 -
:last-of-type
: 选取父元素的最后一个特定类型的子元素。例如,p:last-of-type
会选取每个父元素的最后一个<p>
元素。 -
:nth-of-type(n)
: 选取父元素的第n个特定类型的子元素。例如,p:nth-of-type(2)
会选取每个父元素的第二个<p>
元素。 -
:nth-last-of-type(n)
: 这个伪类的作用与:nth-of-type(n)
类似,但是它是从后往前计数的。例如,p:nth-last-of-type(1)
会选取每个父元素下的最后一个<p>
元素。 -
:only-child
: 选取父元素下唯一的子元素。例如,如果一个元素下只有一个<p>
元素,那么p:only-child
就可以选取到这个<p>
元素。 -
:only-of-type
: 选取父元素下唯一的特定类型的子元素。例如,如果一个元素下只有一个<p>
元素,那么p:only-of-type
就可以选取到这个<p>
元素。 -
:empty
: 选取不包含子元素或者文本的元素。
以上就是CSS3新增的一些伪类,它们使得我们能够更加灵活地选择到页面上的特定元素。