庆阳网站设计制作,wordpress cdn配置,朝阳网站制作,做护肤品好的网站好目录
一、问题
二、原因及解决方法
三、总结 tiips:如嫌繁琐#xff0c;直接移步总结即可#xff01;
一、问题
1.想使用伪类:last-child给 for循环出来的最后一个元素单独添加样式。但是发现无论怎么写都没有添加上去。
2.真是奇怪呀#xff0c;明明写的没有问题呀直接移步总结即可
一、问题
1.想使用伪类:last-child给 for循环出来的最后一个元素单独添加样式。但是发现无论怎么写都没有添加上去。
2.真是奇怪呀明明写的没有问题呀但是检查元素的时候确实看不到样式。
二、原因及解决方法
1.预期效果最后一个元素 红色最后一个元素绿色 html如下效果如下图2-1所示
templatediv classtest-areadivclasstest-boxv-for(firstItem, firstKey) of firstData:keyfirstKey{{ firstItem.label }}/divdiv classother-area/div/div
/template
script langscss scoped.test-area {color: #333;.test-box {:last-child {color: green;}:first-child {color: red;}}}
/script图 2-1 2.为什么 最后一个元素不是绿色呢 为什么 :first-child可以:last-child不生效呢
检查元素发现第一个元素添加了 :frist-child伪类样式最后一个元素却没有。如图2-2所示 图 2-2 3.删除 div classother-area/div 竟然好了 图 2-3 4.把 div classother-area/div 放在第一个test-box前面:first-child竟然失效了 图 2-4 5.原因:first-child只在被选中的第一个元素前面没有其他元素才生效 :last-child只在被选中的最后一个元素后面没有其他元素时才生效
上面的代码中.test-box:last-child后面还有同级的元素 other-area所以不生效
6.解决方法在被循环的test-box外面添加一个父盒子如图2-5所示
代码如下
templatediv classtest-areadiv classbox-areadivclasstest-boxv-for(firstItem, firstKey) of firstData:keyfirstKey{{ firstItem.label }}/div/divdiv classother-area/div/div/template
script langscss scoped.test-area {color: #333;.test-box {:last-child {color: green;}:first-child {color: red;}}}
/script三、总结
1. :first-child,:last-child生效的前提
:first-child只在被选中的第一个元素前面没有其他元素才生效 :last-child只在被选中的最后一个元素后面没有其他元素时才生效 /*
希望对你有帮助
如有错误欢迎指正非常感谢
*/
