CSS 选择器，定位空范围，但不定位包含一个或多个 <a> 标签的范围

Question

我有这两种标记模式：

<h3>
    <span>Title</span>
    <span></span>
</h3>

和

<h3>
    <span>Title</span>
    <span><a>link</a><a>link</a></span>
</h3>

我想用 CSS 定位前者而不是后者，并使用 ::after 插入视觉效果。我不想使用类。我就是看不懂！

h3>span+span:not(h3>span+span>a)::after {
    border: solid 1px transparent;
    content: '\2199';
    display: inline-block;
    color: gray;
}

Answer 1

使用

:not(:has(*))

选择一个空元素（更多详细信息，请参阅我的博客：https://css-tip.com/number-elements-has-selector/）

h3 span:last-child:not(:has(*))::after {
  border: solid 1px transparent;
  content: '\2199';
  display: inline-block;
  color: gray;
}

<h3>
  <span>Title</span>
  <span></span>
</h3>
and

<h3>
  <span>Title</span>
  <span><a>link</a><a>link</a></span>
</h3>