前端技术学习之选择器（五）

六，结构性伪类选择器：first-child

:first-child选择器表示的是选择父元素的第一个子元素E。

代码例子：

结构性伪类选择器—first-child

ul.ancestor li{

background-color: yellow;

}

ul.ancestor >li{

background-color: green;

}

ul.ancestor >li:first-child{

color: orange;

}

Link1

文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色

Link2

关注文字颜色，不要关注超链接颜色

Link3

关注文字颜色，不要关注超链接颜色

Link4

关注文字颜色，不要关注超链接颜色

Link5

关注文字颜色，不要关注超链接颜色

Link6

关注文字颜色，不要关注超链接颜色

Link7

不要关注超链接颜色

运行效果：

注：与first-child相似的list-child，应用起来和first-child一样只不过list-child选择的是最后一个元素。