基于包含值数组的 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\""] 对你的情况来说已经足够了。