[分享]css不给最后一个加before

CSS是一种用于网页美化的样式表语言，其中众所周知的一个特殊选择器是::before伪类，可以在元素的内容之前插入一些内容。然而，在某些情况下，我们并不希望CSS将在最后一个元素加上::before，...

CSS是一种用于网页美化的样式表语言，其中众所周知的一个特殊选择器是::before伪类，可以在元素的内容之前插入一些内容。然而，在某些情况下，我们并不希望CSS将在最后一个元素加上::before，这里我们将详细解释这个问题。

在某些场景下，应用::before伪类可能会影响到我们的布局。例如，我们在某个列表的最后一个元素中使用::before添加一些分割线，但这样会导致最后一个元素之后也出现了分割线，影响了整体效果。因此，我们可以采用以下一些方法来解决这个问题。

/* 1. 给最后一个元素加上一个类名 */
li:last-of-type:not(.no-before)::before {
    content: '---';
}

/* 2. 给最后一个元素另加一个伪类 */
li:not(:last-of-type)::before {
    content: '---';
}
li:last-of-type::after {
    content: ' ';
}
/* 添加一个空的::after伪元素，使之前的::before不会对下一个元素产生影响 */ 

以上代码中，我们使用了:last-of-type选择器来选择列表的最后一个元素，并给它加上了一个类名.no-before，表示该元素不添加::before。我们也可以使用:not(:last-of-type)来选择除了最后一个元素以外的其它元素，但需要另外再加上一个::after伪元素来占据::before所占用的位置。

总之，我们可以通过一些技巧来解决CSS在最后一个元素加上::before所带来的问题，使我们的布局更加美观。