结构伪类选择器详细说明以及案例
结构伪类选择器用于根据元素在文档树中的位置来选择元素。常见的结构伪类选择器包括:
:first-child
:选择作为其父元素的第一个子元素的元素。案例:
p:first-child
选择所有作为其父元素第一个子元素的<p>
标签。:last-child
:选择作为其父元素的最后一个子元素的元素。案例:
p:last-child
选择所有作为其父元素最后一个子元素的<p>
标签。:nth-child(n)
:选择作为其父元素的第n
个子元素的元素。案例:
p:nth-child(2)
选择所有作为其父元素第二个子元素的<p>
标签。:nth-last-child(n)
:选择作为其父元素的倒数第n
个子元素的元素。案例:
p:nth-last-child(2)
选择所有作为其父元素倒数第二个子元素的<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)
:选择作为其父元素下同类型元素的倒数第n
个元素。案例:
p:nth-last-of-type(2)
选择所有作为其父元素下倒数第二个<p>
标签。:only-child
:选择作为其父元素的唯一子元素的元素。案例:
p:only-child
选择所有作为其父元素唯一子元素的<p>
标签。:only-of-type
:选择作为其父元素下同类型元素的唯一元素。案例:
p:only-of-type
选择所有作为其父元素下唯一<p>
标签。
本篇文章内容来源于:结构伪类选择器详细说明以及案例
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。