如何使用CSS选择器提取元素属性内嵌HTML的指定内容

纯CSS选择器无法直接实现从data-content属性的HTML字符串中拆分提取<i>标签包裹的百分比数值，具体说明和可行方案如下：

核心原因 #

• CSS选择器的::attr()语法仅支持读取属性的完整字符串值，没有内置字符串截取、HTML解析能力，无法直接拆分属性值内的片段内容。
• data-content里存放的是纯文本格式的HTML字符串，不是渲染在DOM树中的真实子节点，CSS选择器只能匹配DOM树内真实存在的元素，无法识别属性字符串里的虚拟标签。

可行实现方式 #

固定值场景CSS方案 #

如果业务中百分比是固定枚举值，可以通过属性包含选择器匹配后直接写入展示内容：

/* 匹配对应特征的元素，伪元素展示固定百分比 */
div[data-content*="<i>10%</i>"][data-content*="Web Design"]::after {
  content: "10%";
}
div[data-content*="<i>15%</i>"][data-content*="Web Design"]::after {
  content: "15%";
}

该方案仅支持提前枚举已知的百分比值，无法动态适配任意百分比内容。

动态提取通用方案 #

如果需要适配任意百分比值，必须搭配JS做解析，CSS本身不具备字符串解析能力，参考实现：

// 选中目标DOM元素
const popoverEl = document.querySelector('div[data-content*="Web Design"]');
// 将data-content属性值解析为临时DOM结构
const tempDom = new DOMParser().parseFromString(popoverEl.dataset.content, 'text/html');
// 提取i标签内的百分比文本
const percent = tempDom.querySelector('i').textContent;

如果是使用爬虫类工具（比如PyQuery、Cheerio），同样需要在获取到data-content的完整属性值后，二次调用HTML解析器加载该字符串，再提取<i>标签内的内容，无法通过单条CSS选择器一步完成提取。

内容的提问来源于stack exchange，提问作者Shahidul Islam Pranto