如何通过CSS仅将h2标签内的'NEW'文本设为#fa9f42颜色

我想只把h2标签里的“NEW”文本设置为#fa9f42颜色，但现在用的CSS会把“NEW”、“Cucumber”、“NAAN”这些带span的文本都染成这个颜色。能不能只改CSS实现只让“NEW”变色？怎么操作？

我的HTML代码 #

<body>
<div class="center-text">
    <h1>Our Menu</h1>
    <h2>Idli <span>NEW</span></h2>
    <div id="child"><p>Sambhar Idli, Vada Idli.</p></div>
    <h2>Pasta Salad <span>Cucumber</span></h2>
    <div id="child"><p>Pasta, vegetables, mozzarella.</p></div>
    <h2>Fried Calamari <span>Kulcha</span></h2>
    <div id="child"><p>Squid, buttermilk. <span>NAAN</span></p></div>
</div>
</body>

我尝试的CSS代码 #

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

解决方案 #

可以通过以下几种纯CSS方法实现：

方法1：使用:contains()伪类（直接匹配文本内容） #

这个方法最直接，专门匹配内容为“NEW”的span元素，但注意目前仅Chrome、Edge等现代浏览器支持，兼容性有限：

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

方法2：利用结构伪类定位 #

如果“NEW”所在的h2是页面中第一个h2元素，可以用结构伪类精准定位：

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

缺点是如果后续菜单顺序调整，样式会失效，适合结构固定的场景。

额外说明 #

如果需要更好的浏览器兼容性，最稳妥的方式是给包含“NEW”的span添加专属类（比如<span class="new-badge">NEW</span>），再用.new-badge编写样式，但如果严格要求只修改CSS，上述两种方法就能满足需求。

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