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

介绍

CSS的选择器用于选中HTML文档中的元素，并为其应用样式。:not(:last-child):after选择器是一个非常有用的选择器，可以用来选中除了最后一个子元素外的所有子元素，并在其后面添加一个伪元素。

语法

:not(:last-child):after

用法

这个选择器的主要作用是为除了最后一个子元素外的所有子元素添加样式，并在其后面添加一个伪元素。

示例

假设有以下HTML结构：

<div class="container">
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
  <p>最后一个段落</p>
</div>

为了对除了最后一个段落之外的所有段落应用样式，可以使用:not(:last-child):after选择器。下面是一个示例的CSS样式：

.container p:not(:last-child):after {
  content: " | ";
}

上面的样式将在所有除了最后一个段落之外的段落后面添加一个竖线（|）字符。

结果

以下是应用上述样式后的HTML结构的效果：

第一个段落 | 第二个段落 | 第三个段落 | 最后一个段落

注意事项

• :not(:last-child):after选择器只能用于选中某个父元素的所有子元素中的除了最后一个子元素之外的子元素。
• 由于伪元素是作为目标元素的最后一个子节点添加的，并且不会影响元素的布局，所以选择器:last-child在这种情况下不起作用。

这就是CSS中:not(:last-child):after选择器的介绍。它是一个非常有用的选择器，可以帮助开发人员在特定情况下快速应用样式。