css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child

时间:2023-01-30 12:38:40

1  element:first-child 选择属于其父元素首个子元素的element元素

 

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child

注意:div:first-child 必须是其父元素下面的第一个子元素且必须是div元素才能匹配的到

匹配结果:

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child

 

2  同理:element:last-child 指定其父元素最后一个子元素的element元素

注意:div:last-child  代表其父元素的最后一个元素一定是div才能匹配到

3    :nth-child(n) 选择器匹配属于其父元素的第N个子元素

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child

 

匹配结果

 

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child

4, :nth-last-child(n)  匹配属于其父元素的第N个子元素(从后往前)

5,   only-child 匹配属于其父元素的唯一子元素

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child(),only-child