CSS如何匹配未跟随指定类元素的.title类span并实现单独换行？

你的判断是正确的，CSS原生相邻兄弟选择器+仅能选中当前元素之后的相邻节点，确实没有原生的前置兄弟选择器可以直接根据后续元素的状态反向修饰前置元素。

以下是两种可行的原生CSS实现方案： #

方案1：使用:has()选择器（兼容性：Chrome 105+、Firefox 121+、Safari 15.4+） #

直接匹配「后续相邻兄弟为.title的.title元素」，给这类元素尾部添加换行，逻辑最直观：

span.title:has(+ span.title)::after {
    content: "\a";
    white-space: pre;
}

方案2：相邻兄弟前置换行（兼容所有主流浏览器，无版本要求） #

如果需要兼容不支持:has()的旧版本浏览器，可以换个思路：给「前面相邻兄弟为.title的.title元素」头部添加换行，最终视觉效果和需求完全一致：

span.title + span.title::before {
    content: "\a";
    white-space: pre;
}

以上两种方案都可以实现「孤立的.title单独占一行，其余正常的「标题+内容」组合保留原有排版」的效果。

内容的提问来源于stack exchange，提问作者Faye D.