jQuery :only-of-type选择器实例详解

:only-of-type选择器语法

$('selector:only-of-type')

:only-of-type选择器语法解析

在作有关:only-of-type选择器语法的解析之前，我们来先看一个:only-of-type选择器的实例代码，可以在线运行看看效果：

<div>
  <p class="e">段落1</p>
  <span class="e">span1</span>
</div>
<div>
  <p class="e">段落2</p>
  <p class="e">段落3</p>
</div>

<button id="test" class="btn">jQuery</button>

<script>
  $('#test').click(function(){
    $('.e:only-of-type').css("font-size","3.5em");
  })
</script>

语法解析：结合上面的实例，现在开始解析:only-of-type选择器的语法。如上实例，运行之后，只有第一个div中的p元素和span元素被选择，而第二个div中的两个p元素都不会被选择。这是因为，:only-of-type选择器只会匹配class为e的元素的父元素中类属性为e且元素类型也是唯一的子元素，比如第一个div中p子元素是唯一的，span也是唯一的，而第二个div中class为e的p元素有两个。

即:only-of-type选择器匹配选择的子元素必须是与selector选择器类型相同（比如类属性）且元素类型唯一的子元素！

来源：笨鸟工具

原文：jQuery :only-of-type选择器

免责声明：内容仅供参考，不保证正确性！