css的问题：这里面的first child，last child是什么语法，谢谢。

Question

如题所述

Answer 1

这是css3选择器，意思是选择同级的第一个、最后一个，类似的还有"nth-child"。
使用这些选择器可以轻松替代原来需要js实现的样式设置，给指定的html元素设置样式。

Answer 2

应该是:first-child,:last-child。这是伪类选择器

Answer 3

目的分析：

他这应该是为了实现，底部a链接之间的，分割线条而设置的。如果统一给设置一个样式，这样最后一个会多出一个分隔线（他第一个也单独设置了）。

代码分析：

:first-child （匹配父元素的第一个子元素）

:last-child（匹配父元素的最后一个子元素）

代码示例1：

.footer p:first-child a{}（给p内部的，第一个a设置样式）

<div class="footer">

<p>

<a href="#"></a>(单独样式)

<a href="#"></a>

<a href="#"></a>

</p>

</div>

代码示例2：

.footer p:first-child a:last-child{}（给p内部的，最后一个a设置样式）

<div class="footer">

<p>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>(单独样式)

</p>

</div>

备注：

给你提一个知识点，这个虽然可以设置，但是内容插入其他元素就会找不到，举例如下

<div class="footer">

<p>

<a href="#"></a>

<a href="#"></a>

<a href="#"></a>(单独样式)

<div></div>

</p>

</div>

如果在a后面插入一个div或者其他什么元素，就会找不到最后一个a，样式失效。

也可用另一个伪类：last-of-type（匹配同类型中的最后一个同级兄弟元素）

识别同级别下的相同类型元素，后面插入在的类型标签也不会影响