:first-child
描述: 在每个 ul 中查找第一个 li
HTML代码
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery代码
$("ul li:first-child")
结果
[ <li>John</li>, <li>Glen</li> ]
:first-of-type
描述: 查找作为父元素的span类型子元素中的"长子"的span标签
HTML代码
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
jQuery代码
$("span:first-of-type");
结果
//n4虽然不是n2的第一个子元素,但它是n2所有span类型子元素中的第一个,因此可以匹配
[<span id="n4">span1</span>,<span id="n8" class="abc">span1</span>]
描述:
HTML代码
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
jQuery代码
$(".abc:first-of-type");
结果
//.abc可以匹配id分别为n2、n5、n8的3个元素,n2是n1所有div类型子元素中的第一个,n8是n7所有span类型子元素中的第一个,但n5不是n2所有span类型子元素中的第一个,因此不能匹配n5。
[<div id="n2" class="abc">,<span id="n8" class="abc">span1</span>]
:last-child
描述: 在每个 ul 中查找最后一个 li
HTML代码
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery代码
$("ul li:last-child")
结果
[ <li>Brandon</li>, <li>Ralph</li> ]
:last-of-type
描述: 在每一个匹配的<p>中找到最后一个span
HTML代码
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
jQuery代码
$("p:last-of-type")
结果
[ <span>3</span> ]
:nth-child
描述: 在每个 ul 查找第 2 个li
HTML代码
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery代码
$("ul li:nth-child(2)")
结果
[ <li>Karl</li>, <li>Tane</li> ]
:nth-last-child
描述: 在每个匹配的ul中查找倒数第二个li
HTML代码
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
jQuery代码
$("ul li:nth-last-child(2)");
结果
[ <li>3</li> ]
:nth-last-of-type
描述: 在每个匹配的ul中查找倒数第二个li
HTML代码
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
jQuery代码
$("ul li:nth-last-of-type(2)");
结果
[ <li>3</li> ]
:nth-of-type
描述: 查找每个span,这个 span 是其所有兄弟span元素中的第二个元素。
HTML代码
<div>
<span>John</span>
<b>Kim</b>
<span>Adam</span>
<b>Rafael</b>
<span>Oleg</span>
</div>
<div>
<b>Dave</b>
<span>Ann</span>
</div>
<div>
<i>
<span>Maurice</span>
</i>
<span>Richard</span>
<span>Ralph</span>
<span>Jason</span>
</div>
jQuery代码
$("span:nth-of-type(2)");
结果
[ <span>Adam</span>, <span>Ralph</span> ]
:only-child
描述: 在 ul 中查找是唯一子元素的 li
HTML代码
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
jQuery代码
$("ul li:only-child")
结果
[ <li>Glen</li> ]
:only-of-type
描述: 改变每一个按钮的文字,并且加一个边框,这些按钮的父元素只有这个按钮子元素
HTML代码
<div>
<button>Sibling!</button>
<button>Sibling!</button>
</div>
<div>
<button>Sibling!</button>
</div>
<div>None</div>
<div>
<button>Sibling!</button>
<span>Sibling!</span>
<span>Sibling!</span>
</div>
<div>
<button>Sibling!</button>
</div>
jQuery代码
$("button:only-of-type").text("Alone").css("border", "2px blue solid");
结果
摘自 jQuery API 文档