CSS 规则匹配未跟随特定 class 的另一个元素的元素

Question

我有一个类似于的问题，但不完全相同...

在我的例子中，我有以下布局：

<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
<span class="title">Title4:</span>
<span class="content">Content4</span>

显示是这样的：

标题 1:内容 1

标题 2:内容 2

标题 3:内容 3

标题 4:内容 4

借助以下CSS

span.title{
    font-weight: bold;
}

span.content::after {
    content: "\a";
    white-space: pre;
}

但是，会出现 first span.title 将是 orphan - 后面没有 span.content 而不是另一个 span.title。在那种特殊情况下，我希望孤儿span.title在它自己的行中......所以它会像这样：

Oprhan 标题

标题 1:内容 1

标题 2:内容 2

标题 3:内容 3

标题 4:内容 4

涵盖 :not() 案例的正确规则是什么？

我已经尝试了很多变体，例如下面的变体，但似乎都行不通...

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

非常感谢！

编辑：基本上，我想得越多，我就越怀疑它无法在 CSS 中解决... + 运算符选择它之后的元素，而不是之前的元素...

Answer 1

可以在下一行之前而不是在孤立的标题之后添加换行符。

span.title{
    font-weight: bold;
}

span.content::after {
    content: "\a";
    white-space: pre;
}

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

<span class="title">Orphan Title</span>
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
<span class="title">Orphan Title2</span>
<span class="title">Orphan Title3</span>
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>

CSS 规则匹配未跟随特定 class 的另一个元素的元素

CSS rule to match element not followed by another element of specific class

css

css-selectors