求助：基于含wallet的href选择TR元素的CSS选择器

首先，咱们拆解下你遇到的问题：你没法修改现有HTML，想通过CSS选中包含带有href*="wallet"的<a>标签的<tr>并添加样式，但之前的两种写法都没生效，原因如下：

为什么你的原有写法无效？ #

1. ::parent伪元素不存在：CSS里从来没有::parent这个伪元素/伪类，所以第二种写法从根本上就不成立。
2. :has选择器的潜在问题：第一种写法的思路是对的，但可能是浏览器兼容性不足，或者你的选择器层级匹配有误（比如div#extension是否真的是这个表格的父容器？）。

正确的解决方案 #

方案1：使用CSS的:has伪类（现代浏览器支持） #

:has是CSS原生的父选择器方案，目前Chrome 105+、Firefox 121+、Safari 15.4+都已经支持。你的原有选择器思路正确，只要确认层级匹配、浏览器版本符合要求即可：

/* 确保div#extension确实是table的父元素，如果不是可以去掉这个前缀 */
div#extension tr:has(td > a[href*="wallet"]) {
  background-color: yellow;
}

如果去掉div#extension前缀也能精准选中目标元素，写法可以更简洁：

tr:has(td > a[href*="wallet"]) {
  background-color: yellow;
}

方案2：JavaScript兼容方案（适配旧浏览器） #

如果你的项目需要兼容不支持:has的旧浏览器，只能用JavaScript实现——因为CSS没有其他原生的父元素选择方案：

// 找到所有符合条件的a标签
const targetLinks = document.querySelectorAll('div#extension td > a[href*="wallet"]');

// 遍历每个a标签，找到它的最近tr父元素并添加样式
targetLinks.forEach(link => {
  const targetTr = link.closest('tr');
  if (targetTr) {
    // 直接设置行内样式，或者推荐添加类名（更易维护）
    targetTr.style.backgroundColor = 'yellow';
    // 推荐写法：先在CSS里定义类，再用JS添加
    // targetTr.classList.add('highlighted-row');
  }
});

如果用类名的方式，记得提前在CSS里定义：

.highlighted-row {
  background-color: yellow;
}

额外注意事项 #

• 检查DOM结构：确保div#extension确实包含目标表格，如果这个div和表格没有嵌套关系，选择器前缀会导致匹配失败。
• 浏览器兼容性：如果必须支持旧版浏览器（比如Chrome <105，Firefox <121），优先选择JavaScript方案。

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