如何基于嵌套子元素data属性用:has选择器选中父元素li

你原来的选择器ul.remaining [data-avatar-for-person-id="44220253"]能选中头像，说明这个头像元素不一定是img标签（可能是div、span这类元素），但你写的:has(img[...])限定了必须是img元素，这就导致选择器匹配不到目标li。

修正方法很简单：把选择器里的img去掉，直接用属性选择器匹配头像元素即可：

li:has([data-avatar-for-person-id="44220253"]) {
  font-size: 1.05em !important;
  color: black !important;
}

另外再确认下Firefox的:has功能是否真的正确启用：打开about:config，找到layout.css.has-selector.enabled并确保它设为true，同时你的Firefox版本要在121及以上（实验性支持阶段）。

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