CSS实现父级a非外层容器最后子元素时li添加after伪类失效问题

问题原因 #

• 核心错误是伪类选择器缺少冒号前缀：last-child是CSS内置伪类，使用时必须以:开头，你写的a:not(last-child)会被浏览器解析为「匹配所有不是<last-child>标签的a元素」，无法命中目标元素，规则完全失效。
• 补充说明：当前DOM结构不符合HTML语义规范，<li>作为列表项，直接父元素只能是<ul>、<ol>或<menu>，直接嵌套在<a>标签内可能触发部分浏览器的渲染异常。

修复方案 #

方案1：仅修正CSS（不调整DOM结构） #

将:not()内部的last-child补全冒号为:last-child，同时伪元素after推荐使用符合规范的双冒号写法：

.outerClass > a:not(:last-child) > li.someClass::after {
  content: '|';
  /* 按需补充样式调整分隔符间距 */
  margin: 0 6px;
}

方案2：先修正DOM语义再写CSS（更推荐） #

调整后的DOM结构：

<div class="outerClass">
  <ul>
    <li class="someClass">
      <a href="#">Some Content</a>
    </li>
    <li class="someClass">
      <a href="#">Some Content</a>
    </li>
  </ul>
</div>

对应CSS代码：

.outerClass li:not(:last-child)::after {
  content: '|';
  margin: 0 6px;
}

内容的提问来源于stack exchange，提问作者Jezwin Varghese