CSS :only-of-type选择器,匹配唯一类型子元素

:only-of-type选择器语法

E:only-of-type{样式设置}

提示:该选择器可以用于匹配获取E选择器选择的元素的父元素下的唯一子元素。这是什么意思呢?即,如果E选择器选择的元素的父元素下只有一个该类型的子元素,则匹配获取,并设置样式。


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

<div>
  <p class='e1'>该div下只有一个子元素</p>
</div>
<div>
  <p class='e1'>该div下有两个子元素,这是第一个</p>
  <p class='e1'>这是第二个</p>
</div>
<div>
  <p class='e1'>该div下有两个类型不同的子元素,这是第一个</p>
  <h6>这是第二个</h6>
</div>
<style>
  .e1:only-of-type{color:blue;}
</style>

实例代码解析

如上代码运行之后,只有第一个div里的p元素和第三个div里的p元素会被设置样式。



全栈前端 / CSS教程 :



























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