jQuery | :only-child 选择器

简介

:only-child 选择器用于选择指定父元素中唯一的子元素。如果指定了多个子元素，则此选择器不会匹配任何元素。

语法

$(“父元素:only-child”)

示例

假如有如下的HTML结构：

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li class="only-child">第三项</li>
</ul>

使用 jQuery 的 :only-child 选择器，可以选择到 <li>第三项</li> 元素：

$( "li:only-child" ).css( "background-color", "yellow" );

注意事项

1. 使用 :only-child 选择器时，父元素必须在选择器中被指定。例如 $( "li:only-child" ) ，其中 li 是父元素。
2. 如果指定的父元素不存在或者不唯一，此选择器不会选中任何元素。
3. 如果父元素存在多个子元素，则只有一个子元素会被选中。

总结

:only-child 选择器可以用于选择一个父元素中唯一的子元素，此选择器的使用需要注意一些细节问题，但是灵活使用可以让代码更加简洁明了。