CSS :not(:last-child):after 选择器

在本文中，我们将介绍 CSS 中的 :not(:last-child):after 选择器的使用方法及示例。

阅读更多：CSS 教程

简介

CSS :not(:last-child):after 选择器是 CSS 伪类选择器中的一种，它允许我们对除了最后一个兄弟元素之外的所有兄弟元素添加内容。

语法

下面是 CSS :not(:last-child):after 选择器的语法：

选择器:not(:last-child):after {
  内容
}

选择器：表示要选中的元素或元素组合。
:not(:last-child)：表示除了最后一个兄弟元素之外的所有兄弟元素。
:after：表示在选中元素之后添加内容。
内容：表示要添加的内容。

示例

例如，我们有一个简单的 HTML 结构，包含多个相同的 div 元素：

<div>第一个元素</div>
<div>第二个元素</div>
<div>第三个元素</div>
<div>最后一个元素</div>

我们可以使用 CSS :not(:last-child):after 选择器来为除了最后一个兄弟元素之外的所有兄弟元素添加额外的内容：

div:not(:last-child):after {
  content: "，额外内容";
}

这样，除了最后一个元素之外，其他所有元素的后面都会自动添加上 “, 额外内容”。

输出结果如下：

<div>第一个元素，额外内容</div>
<div>第二个元素，额外内容</div>
<div>第三个元素，额外内容</div>
<div>最后一个元素</div>

注意事项

• :not(:last-child):after 选择器只能选中除了最后一个兄弟元素之外的所有兄弟元素，不能选中父元素中的其他元素。
• 选择器中可以根据需要自定义其他的伪类和属性选择器来进一步限制选择的元素。

总结

CSS :not(:last-child):after 选择器是一种在除了最后一个兄弟元素之外的所有兄弟元素后面添加内容的方法。通过这种选择器，我们可以灵活地控制元素的样式和展示。在实际开发中，我们可以根据具体需求来使用这种选择器，为元素添加额外的内容或样式，以提升用户体验和页面效果。