I LIKE CSS

东京研修的旅程已经分享过了，工作上也有不点收获，我想把这两部分分开记录比较好。这次在日本研修主要针对CSS3使用方面对我们进行了测试，了解下上海这边员工在HTML5和CSS3上的掌握程度。其实我已经算是“老油条”了，日方给到我的测试案件对我来说太简单了，虽然简单还是认真负责的完成了，不过在一处伪类使用上我被搁住了，在之前的伪类使用上我没接触到这个问题，所以还是在这上面学到知识了，下面一起来看下这个案例。

研修课题要求使用CSS3伪类制作一款项目名称排列，先参考下面的DEMO

要求: 在人物名称后用”/”分隔开, 且每行最后一项不需要”/”，在CSS伪类里添加内容代码如下:

ul.fst li:after {
    content: "/";
}

这样每项人物名称后面都会添加”/”，而不需要你在HTML里添加。然后再控制最后一项不需要”/”,CSS样式如下:

ul.lst li:last-child:after {
    content: "";
}

但奇怪的事发生了我DEMO里这两行用的同一款样式，为什么就下面一行的去除了最后一个”/”？原来问题处在我的代码结构上，先看下两行的代码结构:

<li>布鲁克</li>
<span class="team">※草帽海贼团!</span>
/* demo2 */
<li>布鲁克</li>
</ul>
<span class="team">※草帽海贼团!</span>

第一行代码我把span放在ul里面，第二行我把span放置到外面。但注意这里，我CSS是写明ul下面的li最后一项ul.lst li:last-child但为什么第一行我没继承这个效果？我想半天后来东京UX的同事告诉了我，原来这个last-child的伪类是针对你这一组代码里最后一个元素，我第一行最后一个元素是span,所以li没继承到不会去除”/”。第二行我把span放置ul外面就OK了。放置ul外面就OK了，所以这点还是很奥妙的。说了那么多不知道大家明白了没有？如果有疑问请给我留言。附上一张CSS伪类浏览器对照表。