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

Question

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

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

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

div[data-attributes~="LIC"]

所以我假设属性值不是这样的字符串，但是Inspector将javascript对象显示为Json字符串。问题是，如何根据其包含的对象中的一个键/值对选择节点？这在CSS中是否可行？

Answer 1

就css而言，该属性只是一个字符串。您可以使用div[data-attributes*="LIC"]，虽然这不是检查json密钥 - CSS中的* =运算符只是意味着该属性包含该子字符串。所以它也匹配[“LIC2”：“foo”]和类似的。

可能[data-attributes*=":\"LIC\""]对你的情况来说已经足够好了。