You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.02 11:11:16