基于包含多个值的data-*属性选择CSS？

Question

4

我需要根据名为"data-attributes"的属性中的数据选择HTML元素。在Firefox的DOM检查器中，属性值显示如下：

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

我尝试使用以下CSS选择器，但没有成功：

div[data-attributes~="LIC"]

我假设属性值不是一个字符串，而是一个JavaScript对象，由检查器显示为JSON字符串。问题是，如何根据对象中包含的键/值对之一选择节点？这在CSS中是否可能？

- ingredient_15939

“~=” 不是正确的检查方式，因为它只能匹配“由空格分隔的单词列表”。” - ScottS

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam D. Ruppe · Accepted Answer

该属性在CSS中只是一个字符串。你可能可以使用div[data-attributes*="LIC"]，不过这并没有检查JSON键 - 在CSS中，*=操作符只是表示该属性包含该子字符串。因此它也会匹配 ["LIC2":"foo"] 等相似的内容。

也许[data-attributes*=":\"LIC\""]对于你来说已经足够了。