:has()选择器的替代方案？v-html渲染时为含img的span加样式

给你几个兼容性拉满的替代路子，不用依赖:has()就能给包含img的span加样式：

1. 渲染前给目标span打标记 #

在把HTML字符串传给v-html之前，先手动处理一遍，给包含img的span加个自定义类名，之后直接用CSS选这个类就行，兼容性覆盖到IE10+完全没问题。

示例代码：

// 假设你的原始HTML字符串存在rawHtml变量里
const parser = new DOMParser();
const doc = parser.parseFromString(rawHtml, 'text/html');

// 找到所有包含img的span，给它们加类
const spansWithImg = Array.from(doc.querySelectorAll('span img')).map(img => img.parentElement);
// 去重处理，避免同一个span被多次选中
const uniqueSpans = [...new Set(spansWithImg)];
uniqueSpans.forEach(span => {
  span.classList.add('span-has-img');
});

// 把处理后的HTML传给v-html用
this.processedHtml = doc.body.innerHTML;

对应的CSS：

.span-has-img {
  /* 这里写你的自定义样式 */
  border: 1px solid #eee;
  padding: 3px;
  border-radius: 4px;
}

2. 用Vue自定义指令处理已渲染DOM #

写个自定义指令，在元素渲染完成后自动扫描内部的span，给包含img的span加类，不管是v-html渲染的内容还是其他DOM都能处理。

Vue 2 示例： #

// 全局注册指令（也可以局部注册）
Vue.directive('mark-img-span', {
  inserted(el) {
    // 遍历当前元素下所有span
    const spans = el.querySelectorAll('span');
    spans.forEach(span => {
      // 检查span里有没有img元素
      if (span.querySelector('img')) {
        span.classList.add('span-has-img');
      }
    });
  }
});

模板里使用：

<div v-html="rawHtml" v-mark-img-span></div>

Vue 3 示例： #

// 全局注册
app.directive('mark-img-span', {
  mounted(el) {
    const spans = el.querySelectorAll('span');
    spans.forEach(span => {
      if (span.querySelector('img')) {
        span.classList.add('span-has-img');
      }
    });
  }
});

3. 从数据源层面提前处理 #

如果你的HTML内容是后端返回的，直接让后端在生成HTML的时候，给包含img的span加上预设类名，比如span-has-img。前端拿到后不用额外处理，直接写CSS就能选中，这是最省心的方案。

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