如何根据<div>内容为::before伪元素设置差异化样式？

现有HTML结构如下：

<p>Paragraph.</p>
<div class="note">Naked Note Div.</div>
<div class="note">
  <p>Paragraph in Note DIV.</p>
  <p>Second Paragraph in Note DIV.</p>
</div>
<div>NON Note Naked Div.</div>
<div>
  <p>Paragraph in NON None DIV.</p>
</div>

期望实现的显示效果：

Paragraph.
 NOTE: Naked Note Div.
 NOTE: Paragraph in Note DIV.
 Second Paragraph in Note DIV.
 NON Note Naked Div.
 Paragraph in NON None DIV.

尝试用CSS伪元素::before实现时遇到两个问题：

• 用.note::before {content: "NOTE: ";}时，包含<p>子元素的.note会在整个div前单独显示“NOTE: ”，不符合需求；
• 用.note :first-child::before {content: "NOTE: ";}时，纯文本内容的.note无法添加“NOTE: ”。

请问能否仅通过纯CSS实现需求，不使用预处理器或jQuery等工具？

可以通过组合两种伪元素选择器覆盖两种场景，同时调整样式避免布局问题：

/* 处理纯文本内容的.note元素 */
.note::before {
  content: "NOTE: ";
  display: inline;
}

/* 给包含子元素的.note的第一个子元素添加前缀 */
.note > :first-child::before {
  content: "NOTE: ";
  display: inline;
}

/* 关键：当.note包含子元素时，清空它自身的伪元素内容 */
.note:has(> *)::before {
  content: "";
}

方案说明： #

1. 先给所有.note元素添加::before伪元素，直接搞定纯文本的情况；
2. 使用:has(> *)选择器匹配包含子元素的.note，把它自身的伪元素内容清空，避免出现多余的独立“NOTE: ”；
3. 给这类有子元素的.note的第一个子元素加前缀，让第一个段落带上“NOTE: ”；
4. 设置display: inline确保前缀和内容在同一行，不会换行打乱布局。

如果需要兼容不支持:has选择器的旧浏览器（比如Chrome 105之前、Firefox 121之前的版本），可以用下面的替代方案：

/* 基础：给所有.note加前缀 */
.note::before {
  content: "NOTE: ";
  display: inline;
}

/* 给有子元素的.note的第一个子元素加前缀，用负边距调整位置 */
.note > :first-child::before {
  content: "NOTE: ";
  display: inline-block;
  margin-left: -4em; /* 这个值需要匹配"NOTE: "的宽度，可根据实际调整 */
}

/* 给第一个子元素加左边距，抵消前缀的负边距保证布局对齐 */
.note > :first-child {
  margin-left: 4em;
}

这个替代方案通过负边距调整前缀位置，不需要依赖:has选择器，适配范围更广。

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