css - 用于基于包含值数组的 data-* 属性进行选择的 CSS？

Question

我需要根据名为“data-attributes”的属性中的数据选择一个 HTML 元素。在 Firefox 的 DOM Inspector 中，属性值如下所示：

<div data-attributes="[{"Id":50,"Code":"LIC","ShowInSessionFilter":false}]">

我尝试使用如下 CSS 选择器，但无济于事：

div[data-attributes~="LIC"]

所以我假设属性值不是这样的字符串，而是由 Inspector 显示为 Json 字符串的 javascript 对象。问题是，如何根据它包含的对象中的键/值对之一来选择节点？这在 CSS 中可能吗？

Answer 1

就 css 而言，该属性只是一个字符串。您可能可以使用div[data-attributes*="LIC"]，尽管这不是检查 json 键 - CSS 中的 *= 运算符仅表示该属性包含该子字符串。所以它也会匹配 ["LIC2":"foo"] 和类似的。

不过，也许[data-attributes*=":\"LIC\""]对您的情况来说已经足够了。