：第一个孩子和：最后一个孩子

Question

我真的没有明白:first-child和:last:child的想法。您能举一个澄清这两个过滤器的例子吗？

Answer 1

Demo

1。 HTML

<ul>
    <li>First</li>
    <li>Child</li>
    <li>Child</li>
    <li>Child</li>
    <li>Last</li>
</ul>

2。 CSS

.red{
    color: red;
}

.blue{
    color: blue
}

3。 jQuery的

$('ul :first-child').addClass('red');
$('ul :last-child').addClass('blue');

在这种情况下，css类red将添加到第一个li元素，而css类blue将添加到最后一个li元素。

Answer 2

 <ul>
<li>
    <a><img src="mysource" alt="my alt tag 1"/></a>
</li>
<li>
    <a><img src="mysource" alt="my alt tag 2"/></a>
</li>
<li>
    <a><img src="mysource" alt="my alt tag 3"/></a>
</li>
<li>
    <a><img src="mysource" alt="my alt tag 4"/></a>
</li>
</ul>

$("ul li:last-child)会给你最后一个：

<li>
        <a><img src="mysource" alt="my alt tag 4"/></a>
    </li>

它会扫描以使最后一个孩子处于特定范围内。

同样适合第一个孩子

Answer 3

http://jsfiddle.net/mMYrf/6/

如果你有很多元素，你可以直接选择最后一个和第一个元素，无论有多少元素。 前http://jsfiddle.net/mMYrf/6/

你为什么要用它？ 因为如果你有一个元素网格，你可能想要第一个和最后一个项目的圆角。 您可能不希望在第一个或最后一个项目上留有余量等等..：）

Answer 4

这不是关于jQuery而是关于CSS：:first-child and :last-child。