如何仅用CSS将特定内容中的NEW标签设为橙红色？

本文共计729个文字，预计阅读时间需要3分钟。

原文：

` 标签内唯一的 `"new"` 文本（如 `new`），避免误染其他 `` 内容（如 "cucumber" 或 "naan"），无需修改 html 结构。

在实际开发中，我们常需对特定语义标签（如表示新品的 NEW）进行视觉强化，但又不能影响其他同级 <span> 元素。你当前的 CSS 选择器 .center-text h2 span 匹配了所有 <h2> 下的 <span>，因此 "Cucumber"、"Kulcha" 和段落中的 "NAAN" 均被误样式化。

解决方案一：利用相邻兄弟关系（推荐用于当前 HTML 固定结构）
观察 HTML 结构可知，唯一含 "NEW" 的 <h2> 紧跟在 <h1> 后面——即它是 <h1> 的紧邻下一个 <h2> 元素。因此可使用 + 相邻兄弟组合器精准锁定：

.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; }

✅ 此规则仅作用于 <h1> 后第一个 <h2> 内的 <span>（即 Idli <span>NEW</span>），完全跳过后续 <h2> 及 <p> 中的其他 <span>。