在看CSS时，看到first-child和last-child，查了一些资料，谈谈自己的感想。

first-child选择器用于选取属于其父元素的首个子元素的指定选择器。
last-child选择器用于选取属于其父元素的最后一个子元素的指定选择器。

我们来看两个简单的例子：

a: first-child {color：yellow;}
p: last-child {background: pink;}

从这两个例子我们可以看出first-child和last-child的含义。这两个选择器实际上是一种修饰描述，它们修饰的是它们之前的冒号前的元素。在这里，它们分别修饰的是a和p。对满足它俩要求的a和p定义后面给定的样式。对于a的要求是，这个a是它的父元素的第一个子元素。对于p的要求是它的父元素的最后一个子元素。

下面我们来看几个例子，看看它们是否满足要求。

第一个例子：

<div>
<a>第一个链接</a>
<a>第二个链接</a>
<a>第三个链接</a>
</div>

在这个例子里，第一个链接的a是父元素div的第一个子元素，所以它满足条件。它的格式会发生改变。

第二个例子：

<div>
<p>一段话</p>
<a>第一个链接</a>
<a>第二个链接</a>
<a>第三个链接</a>
</div>

在这个例子里，第一个链接的a不是它父元素div的第一个子元素，第一个子元素是p，所以它不满足条件，格式不会改变。

第三个例子：

<div class="div1">
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<div class="div2">div, 我是最后的元素。</div>
</div>

在这个例子里，最后一个段落的p不是它父元素div的最后一个子元素，最后一个子元素是div，所以它不满足条件，格式不会改变。

第四个例子：

<div class="div1">
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<div class="div2">div, 我是元素div。</div>
<p>第四个段落。</p>
</div>

在这个例子里，最后的第四个段落的p是它父元素div的最后一个子元素，所以它满足条件，格式会被改变。

总结：

first-child和last-child修饰的是它俩冒号之前的那个元素，实现对它们的样式的控制。不过能否真的去改变样式，还要看它俩之前的那个元素是否是其父元素的真正的第一个子元素和最后一个子元素。如果在它们之前或之后还有别的元素，那它们就不满足条件，不会被进行修改。