如何根据div内h3的特定内容修改外层package类的背景样式

目前有两种可行的实现方式，分别对应现代CSS方案和全兼容JS方案：

方案1：CSS :has() 选择器实现（适合不需要兼容旧浏览器的场景） #

CSS目前没有直接匹配元素文本内容的选择器，所以需要先给目标h3添加自定义属性做标记，再结合CSS原生父选择器:has()匹配外层.package元素：

1. 修改HTML的h3标签，增加自定义属性：

   <h3 data-title="Bl4ckGift">Bl4ck🎁Gift</h3>
   

2. 新增CSS规则：

   /* 匹配内部h3符合属性条件的.package元素 */
   .package:has(.package__info h3[data-title="Bl4ckGift"]) {
     /* 替换为你需要的背景值即可 */
     background: #ff0000;
   }
   

该方案兼容性：Chrome 105+、Safari 15.4+、Firefox 121+版本均支持，无需写JS代码，实现最简洁。

方案2：JavaScript 实现（全浏览器兼容） #

该方案无需修改原有HTML结构，所有浏览器都支持，逻辑为遍历匹配文本的h3元素，给对应外层.package加自定义样式：

1. 先新增自定义样式类：

   .package--special {
     /* 替换为你需要的背景值即可 */
     background: #ff0000;
   }
   

2. 新增JS代码：

   // 遍历所有.package下的对应h3元素
   document.querySelectorAll('.package .package__info h3').forEach(h3El => {
     // 完全匹配文本内容，需要模糊匹配可以改为includes('Bl4ck🎁Gift')
     if (h3El.textContent.trim() === 'Bl4ck🎁Gift') {
       // 找到外层.package元素，添加自定义类
       h3El.closest('.package').classList.add('package--special');
     }
   })
   

如果是动态加载的内容，只需在内容渲染完成后执行上述JS代码即可。

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