使用伪类渲染边框线,最后一条不生效

最新推荐文章于 2023-08-28 10:57:49 发布

原创最新推荐文章于 2023-08-28 10:57:49 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

本文探讨了使用CSS伪类渲染列表容器中的边框线时遇到的问题：即最后一项的边框不生效的情况。通过:not(:last-child)::after 伪类选择器尝试为除最后一个元素外的所有元素添加底部边框，但发现对于最后一个列表项的边框移除并未生效。

使用伪类渲染边框线,最后一条不生效

.list_item {
    //列表容器
    display: flex;
    align-items: center;
    padding: 1rem;
    position: relative;

    //右边图片框
    .r_left_icon {
        img {
            width: 1.5rem;
            // 图片大小自行改变
        }
    }

    // 右边文字
    .r_right_txt {
        padding-left: .5rem;
        color: #000000;
    }
	// not取反 最后一项不生效 
    &:not(:last-child)::after {
        position: absolute;
        content: "";
        width: 109%;
        height: 1px;
        background: #ccc;
        bottom: 0;
        left: -1rem;
    }

    /* 
或者需要边框线 
//列表后一个样式不生效
.list_item:last-child{
    border: none;
}

*/
}