:only-child | CSS属性参考

CSS :only-child伪类选择器用于匹配父元素中的唯一子元素。也就是说,它只会匹配是父元素中唯一子元素的元素。

例如如果有下面的一段HTML代码:

<article>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </p>
</article>

那么使用p:only-child就可以匹配<article>元素中的p元素。但是如果修改一个HTML代码,如下:

<article>
    <h1>标题</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit...
    </p>
</article>

那么使用p:only-child将不会匹配任何的段落元素。

:only-child伪类选择器还可以写成:first-child:last-child或者:nth-child(1):nth-last-child(1):first-child:last-child表示匹配父元素中既是第一个子元素又是最后一个子元素的元素。:nth-child(1):nth-last-child(1)表示匹配父元素中是从上开始计数的第一个子元素,又是从下开始计数的第一个子元素的元素。

示例代码

下面都是有效的:only-child规则。

li:only-child { /*  */}

span:only-child { /*  */}

article:only-child:hover { /*  */}

a:only-child::after { /*  */}

.product:only-child h1 { /*  */}
在线演示

下面的例子中有两个无序列表,第一个列表中有三个列表项,第二个列表中只有一个列表项,因此使用li:only-child规则只会匹配到第二个列表中的列表项。

第一个列表

  • 列表项一
  • 列表项二
  • 列表项三

第二个列表

  • 列表中只有一个列表项
浏览器支持

所有的现代浏览器都支持:only-child伪类选择器,包括:Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 9+ 以及 Android 和 iOS。

相关阅读
© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享