CSS伪类last-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伪类浏览器对照表。
#1
效果貌似很不错哦
#2
为啥demo都做的那么好看,实在是太嫉妒人了。
我这就叫做金玉其外,败絮其中!
nonono~ 你太谦虚了,我确实很嫉妒,连demo都做的那么好看,这是技术的提现
我主要是想设计的好看点,就算没什么技术含量也能给人以专业的感觉
#3
child顾名思义是相对parent而言嘛 也就是你说的组咯
恩恩,你说的很专业
#4
after
什么after?我拼错了吗?
#5
这个图片样式不错。搬走了。
#6
博主是技术仁人才啊,留个脚印
你的网站也不错,多谢访问!
#7
演示有点问题。Demo2草帽海贼团和前面的重叠了。不过我还是看明白了。
啊?失败啊,我浏览器都看过了啊,你用的什么浏览器?
我突然想到程序猿经常说的一句话,在我机器上没问题啊,哈哈。
我看过了,在chrome老版本有这个问题。。。
:smile:Chrome看的啦。我用现在的这个版本看完美显示了。
恩,我之前测试过了,在1024分辨率下的确不好,后来调整过了。谢谢你的意见啊~
#8
私はね しばしばからブログランニングおよび認識をあなたのコンテンツ。ピークは私の興味を|記事実際には本当に持っています。 私は行くよと維持情報ブランドスパンキング新しいのためのブランドの新しいの新しいのためにチェックを。