使用CSS last-child选择器移除轮播最后一个指示点的连线
解决轮播指示点最后一个圆点的纵向连线隐藏问题
你的核心问题是没找准层级关系——当前连线是通过.slide-dot-style::after生成的,要隐藏最后一个圆点的连线,必须选中最后一个.slide-dot容器内的.slide-dot-style,再取消它的伪元素。
修改后的代码如下:
.show-dots { .slide-dots { position:absolute; top:30%; left:15%; width: 40px; z-index:98; .slide-dot { width:40px; margin: 0 auto 35px auto; text-align: center; a { display:block; text-align:center; width:40px; .slide-dot-style { width:7px; height:7px; border-radius:15px; display:block; background-color:@white; margin: 0 auto; -webkit-box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.4); -moz-box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.4); box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.4); &::after { content: ""; position: absolute; left: 50%; background-color: @white; height: 35px; width: 1px; top: 0; } &.active { width:15px; height:15px; &::after { height: 42px; } } } } // 关键代码:选中最后一个.slide-dot内部的连线伪元素,隐藏它 &:last-child .slide-dot-style::after { content: none; // 直接取消伪元素生成,比display:none更彻底 } } } }
补充说明
之前尝试的last-child组合失效,是因为你错误地把:last-child加在了.slide-dot-style上——它是父元素<a>的唯一子元素,所有.slide-dot-style都会被判定为last-child,自然无法精准定位最后一个圆点。
如果.slide-dots容器内除了.slide-dot还有其他同级元素,把:last-child换成:last-of-type更稳妥,确保只选中最后一个.slide-dot元素。
内容的提问来源于stack exchange,提问作者NewAnoner
相关产品推荐
相关产品推荐

