5.结构伪类选择器

结构伪类选择器：是针对HTML层次“结构”的伪类选择器，通过元素的特定位置从而进行定位，减少 HTML文档对ID或者类名的定义。

1.x:first-child 为父元素的第一个子元素x设置样式

例如：ul li:first-child表示为父元素ul的第一个子元素li设置样式

 

2.x:last-child 为父元素的最后一个子元素设置样式

例如：ul li:last-child表示为父元素ul中最后一个li元素设置样式

 

3.x:nth-child(n) 为父元素的第n个子元素且第n个元素为x设置样式

例如：p:nth-child(1)表示为当前p元素的父元素body的第一个子元素且元素为p设置样式,由于这里p元素是父级元素的第二个，所以样式不生效

4.x:nth-of-type(n) 为当前元素的父元素下的第n个x元素设置样式

例如：p:nth-of-type(1)表示为当前p元素的父元素下的第一个p元素设置样式