如何用CSS选择不含<a>标签的空span元素并添加::after伪元素

你的问题出在:not()选择器的用法上——:not()的参数不能是包含后代元素的选择器，它只能针对当前元素本身的条件做筛选，没法直接检查子元素。要选中那个空的<span>而排除包含<a>的<span>，可以用下面两种方案：

方案1：用:empty伪类 #

如果目标<span>确实是完全空白（没有任何文本、空白字符或子元素），直接用:empty匹配空元素：

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

注意：如果<span>里有空格、换行这类空白字符，:empty就不会匹配它了。

方案2：用:not(:has(*))（更通用） #

如果目标<span>可能包含空白字符但没有子元素，用:has(*)检查是否有子元素，再取反：

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

:has()是现代浏览器支持的选择器，能准确判断元素是否包含指定的子元素，这个方案兼容性更好（Chrome、Firefox、Edge等主流浏览器都已支持）。

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