CSS选择器（4）——结构伪类选择器

结构伪类选择器可以根据元素在文档中的某些特性定位到它们，也就是说，通过文档树结构的相互关系来匹配特定的元素，从而减少HTML文档对ID或者类名的定义，保持代码干净和整洁。

结构伪类选择器

E:first-child

E为父元素的第一个子元素，否者匹配不成功。与nth-child(1)等同。

p:first-child i
{
background:yellow;
}

选择每个 <p> 中的每个 <i> 元素并设置其样式，其中的 <p> 元素是其父元素的第一个子元素。

E:last-child

E为父元素的最后一个子元素，否者匹配不成功。与nth-last-child(1)等同。

p:last-child
{ 
background:#ff0000;
}

E:nth-child(n)

用法同上，n从1开始。

E:nth-last-child(n)

用法同上，n从1开始。

E:first-of-type

选择父元素内具有指定类型为E的第一个E元素，与E:nth-of-type(1)相同

p:first-of-type
{
background:#ff0000;
}

E:last-of-type

选择父元素内具有指定类型为E的最后一个E元素，与E:nth-last-of-type(1)相同

p:first-of-type
{
background:#ff0000;
}

E:nth-of-type(n)

用法同上，n从1开始。

E:nth-last-of-type(n)

用法同上，n从1开始。

E:only-child

选择父元素只包含一个子元素，且该子元素是E元素。

E:only-of-type

选择父元素只包含一种类型的元素，且该类型是E。

E:only

选择没有子元素的父元素，并且该元素也不包含任何文本节点。