CSS :only-child选择器,实例在线编辑

:only-child选择器语法

E:only-child{样式设置}

该CSS伪类选择器,可以用于匹配获取E选择器选择的元素的父元素当中,只有唯一该类型的子元素,如果父元素当中的唯一的子元素并不是E选择器选择的类型,则不设置样式。


:only-child选择器实例代码,及在线编辑器

<div>
  <p class='e1'>这是第一个div中的唯一子元素p</p>
</div>
<div>
  <p class='e1'>这是第二个div中的第一子元素p</p>
  <span>这是第二个div中的第二个子元素span</span>
</div>
<div>
  <p>这是第三个div中唯一的子元素p,但不是类e1的元素</p>
</div>
<style>
  .e1:only-child{color:blue;}
</style>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.