如何为首个div[data-is-new='false']设置CSS内容及无新数据提示？

1. 仅在首个旧数据元素显示"HEADER FOR OLD DATA" #

要实现和蓝色边框一致的效果，只让第一个旧数据元素显示头部提示，只需沿用你处理边框的思路，给后续旧数据元素的伪元素清空内容即可：

修改后的CSS：

.shadow {
  margin-bottom: 50px
}

div[data-is-new='false'] {
  color: rgb(199, 199, 199);
  background-color: rgba(247, 247, 247, 0.57);
  border-top: 2px solid blue;
}

/* 所有旧数据元素默认设置头部 */
div[data-is-new='false']::before {
  display: block;
  content: "HEADER FOR *OLD* DATA";
  color: black;
}

/* 移除后续旧数据元素的边框 */
div[data-is-new='false']~div[data-is-new='false'] {
  border-top: none;
}

/* 隐藏后续旧数据元素的头部 */
div[data-is-new='false']~div[data-is-new='false']::before {
  content: none;
}

逻辑和边框处理完全一致：~选择器选中所有排在第一个旧数据元素之后的同类型元素，清空它们的伪元素内容，这样就只有第一个旧数据元素会显示头部。

2. 无新数据时显示"no new data"提示 #

可以用CSS的:has()选择器检测容器内是否存在新数据元素，若不存在则通过伪元素生成提示。先移除示例中手动添加的<span>，再添加以下CSS规则：

完整CSS（包含上一步的修改）：

.shadow {
  margin-bottom: 50px
}

div[data-is-new='false'] {
  color: rgb(199, 199, 199);
  background-color: rgba(247, 247, 247, 0.57);
  border-top: 2px solid blue;
}

div[data-is-new='false']::before {
  display: block;
  content: "HEADER FOR *OLD* DATA";
  color: black;
}

div[data-is-new='false']~div[data-is-new='false'] {
  border-top: none;
}

div[data-is-new='false']~div[data-is-new='false']::before {
  content: none;
}

/* 当容器内无新数据时，在新数据头部下方显示提示 */
.shadow:not(:has([data-is-new="true"])) .header::after {
  display: block;
  content: "no new data";
  color: #666;
  margin: 8px 0;
  font-style: italic;
}

对应的示例2 HTML：

<p>Example 2</p>
<div class="shadow">
  <div class="header">HEADER FOR *NEW* DATA</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
  <div data-is-new="false">OLD data</div>
</div>

说明 #

• :not(:has([data-is-new="true"])) 精准匹配不包含任何新数据元素的.shadow容器
• 把提示挂载在.header的::after伪元素上，确保位置和新数据头部关联
• 可以根据需求调整提示的样式（颜色、边距、字体等）

注意：:has()选择器目前支持Chrome、Edge、Safari 15.4+，如果需要兼容更早的浏览器，可能需要用JavaScript辅助检测。

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