认识CSS3 :only-child 选择器和使用方法_CSS学习

来源：网络整理时间：2023/3/4 0:57:41 共 3648 浏览

定义和用法

:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

所有主流浏览器均支持 :only-child 选择器，除了 IE8 及更早的版本。

案例：

案例一：

规定属于其父元素的唯一子元素的每个 p 元素：

p:only-child{background:#ff0000;}

<!DOCTYPE html>
<html>
<head>
<style> 
p:only-child
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<p>这是一个段落。</p>
</div>
<div>
<span>这是一个 span。</span>
<p>这是一个段落。</p>
</div>
<p><b>注释：</b>Internet Explorer 不支持 :only-child 选择器。</p>
</body>
</html>

案例二、

《纯CSS制作多级下拉菜单（有子菜单时显示特定图标）》

使用在纯CSS下拉菜单中，当没有子菜单时候不显示菜单下拉图标，需要用到:only-child！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery 选项卡切换特效代码（点击切换）_js/jQuery | ·下一条：纯CSS制作多级下拉菜单（有子菜单时显示特定图标）_CSS学习