解决css中E:first-child,E:last-child,nth-child()无效的问题

目的：想给ul中第一个li设置颜色

错误代码：

 解决之后：

 

 

总结原因：nth-child()它的范围是在E（这里是li）的所有兄弟sibilings中，故li：nth-child（1）是指的第一个li，而在原来的ul：nth-child（1）是指整个ul，包括了里面所有的li。

last-child和first-child同样是在所有sibilings中选取最后一个和第一个：

 现在对HTML结构重新更改，ul添加上同级的其他标签：

 在这个结构里，ul 、h1，h2，h3在同一级，设置如下的样式：

 

情况：h1排在第2位，改变了颜色，而第3位的h2不变

解决后

 

 更改标签，第3位是h2

同理设置h3

 

 注意：h3：last-child此时无效