使用 :not 伪类结合 ::before 和 ::after 可精准控制样式应用，如 p:not(:first-of-type)::before 添加段落前缀、.nav a:not(:last-child)::after 实现导航分隔符、.card:not(:last-child) 统一间距、.btn-group .btn:not(.icon-only)::before 添加条件装饰，避免冗余类和标签，提升代码可维护性与布局智能性。
使用 CSS 的 :not 伪类结合伪元素（如 ::before 和 ::after）可以更灵活地控制布局，避免冗余代码，提升可维护性。关键在于精准选择目标元素，排除特定情况，减少额外标签。
用 :not 避免对特定元素应用伪元素
有时你希望为一组元素添加装饰性内容或布局辅助，但要排除其中某些特殊情况。通过 :not 可以跳过不需要的元素，防止样式冲突。
例如：为所有段落前添加装饰图标，但首段除外p:not(:first-of-type)::before {
content: "›";
margin-right: 8px;
color: #999;
}
这样只有非首个段落才会显示前缀符号，保持视觉节奏清晰，无需额外 class 控制。
结合 :not 与 ::after 实现智能分隔符
在行内元素或导航项之间添加分隔符时，传统做法是给每个项加“|”，末尾再用额外规则去除。使用 :not 能更直观地表达“除了最后一项都加”的逻辑。
立即学习“前端免费学习笔记（深入）”；
示例：导航链接间添加分隔线.nav a::after {
content: "|";
margin: 0 8px;
}
.nav a:last-child::after {
display: none;
}
/* 更简洁写法 */
.nav a:not(:last-child)::after {
content: "|";
margin: 0 8px;
}
这种写法语义清晰，减少一条样式规则，也更容易维护。
利用 :not 控制布局间距一致性
在弹性布局或网格中，有时需要为子元素设置统一外边距，但最后一个不加，避免多余空白。使用 :not(:last-child) 可高效实现。
- 给除最后一项外的所有卡片添加下边距
- 避免使用 :first-child 或重复 margin 覆盖
.card:not(:last-child) {
margin-bottom: 16px;
}
若配合伪元素做连接线或背景装饰，也可只作用于中间项，保持结构干净。
优化复杂容器中的伪元素表现
当父容器包含多种子类型（如文本、按钮、图标），想对某类以外的所有元素添加装饰时，:not 搭配伪元素非常有效。
例子：为非图标的按钮组添加连接线.btn-group .btn:not(.icon-only)::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%;
background: #ccc;
}
这样仅在非图标按钮上显示分隔线，避免视觉干扰，同时保持 HTML 简洁。
基本上就这些。合理运用 :not 与伪元素，能让 CSS 更具表达力，减少无意义的 class 和标签嵌套，提升布局的智能性和可读性。不复杂但容易忽略。
