Welcome, Old Sport!

CSS伪类last-child的案例分析

by ilikecss ON 2013/05/03 19960

CSS伪类X-child的案例分析东京研修的旅程已经分享过了,工作上也有不点收获,我想把这两部分分开记录比较好。这次在日本研修主要针对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伪类浏览器对照表。

CSS伪类浏览器对照表

19条评论
  1. 效果貌似很不错哦

  2. #2

    不亦乐乎说道:

    为啥demo都做的那么好看,实在是太嫉妒人了。 :???:

  3. #3

    小蝴蝶说道:

    child顾名思义是相对parent而言嘛 也就是你说的组咯

  4. #4

    yxiao说道:

    after

  5. #5

    yxiao说道:

    这个图片样式不错。搬走了。 :smile:

  6. #6

    网赚博客说道:

    博主是技术仁人才啊,留个脚印

  7. #7

    野蛮人说道:

    演示有点问题。Demo2草帽海贼团和前面的重叠了。不过我还是看明白了。 :smile:

  8. 私はね しばしばからブログランニングおよび認識をあなたのコンテンツ。ピークは私の興味を|記事実際には本当に持っています。 私は行くよと維持情報ブランドスパンキング新しいのためのブランドの新しいの新しいのためにチェックを。




TOP