如何仅用 CSS 将 <h2> 中的中的 "NEW" 标签设为橙红色 " />

本文介绍如何通过纯 CSS 精准定位并高亮标签内唯一的 "NEW" 文本（如 NEW），避免误染其他内容（如 "Cucumber" 或 "NAAN"），无需修改 HTML 结构。

本文介绍如何通过纯 css 精准定位并高亮 `

` 标签内唯一的 `"new"` 文本（如 `new`），避免误染其他 `` 内容（如 "cucumber" 或 "naan"），无需修改 html 结构。
在实际开发中，我们常需对特定语义标签（如表示新品的 NEW）进行视觉强化，但又不能影响其他同级元素。你当前的 CSS 选择器 .center-text h2 span 匹配了所有
下的，因此 "Cucumber"、"Kulcha" 和段落中的 "NAAN" 均被误样式化。

解决方案一：利用相邻兄弟关系（推荐用于当前 HTML 固定结构）
观察 HTML 结构可知，唯一含 "NEW" 的

紧跟在

后面——即它是

的紧邻下一个
元素
。因此可使用 + 相邻兄弟组合器精准锁定：

.center-text h1 + h2 span {
  background-image: linear-gradient(to left, #fa9f42, #fa9f42);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

✅ 此规则仅作用于

后第一个

内的（即 Idli NEW），完全跳过后续
及

中的其他。

⚠️ 注意事项：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

该方案强依赖 HTML 顺序。若未来新增
在
后、或调整 DOM 顺序，样式将失效；

不具备语义可维护性——无法通过类名直观理解“这是 NEW 标签”。

解决方案二（更优实践）：添加语义类名（强烈建议长期采用）
在 HTML 中为 "NEW" 对应的显式添加语义类，例如：

<h2>Idli <span class="label-new">NEW</span>
</h2>
<!-- 其他 h2 保持原样，不加 class -->

对应 CSS 即简洁可靠：

.label-new {
  background-image: linear-gradient(to left, #fa9f42, #fa9f42);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

✅ 优势明显：