在javascript选择器引擎中使用子代码匹配和数据信息

您好，我正在使用如果您单击该链接，示例页面将显示选择器，如

div#baz.thunk a[-data info*=“hello world”]span+strong{}

及

#fooa[lang |=en]{}子代码

我无法理解子代码和数据信息的用法，我甚至阅读了CSS2选择器w3c页面，但无法从中理解。有人能用简单的例子解释一下这些是如何工作的吗。我对-data info的概念是匹配对象的内部HTML、Dom属性，如下所示

<a href="http://www.google.com">Hello</a>

请澄清我的想法，并建议我使用qwery选择器引擎编写查询以获取innerHTML/其他属性

摘录：

这里有一个特别的会给人留下深刻印象的 你的朋友。没有太多人知道 关于这个把戏。tilda（~）符号 允许我们针对一个属性 具有分隔的值列表

使用我们的自定义属性 从上面的十五号开始，我们可以 创建一个数据信息属性，该属性 可以接收以空格分隔的列表 任何我们需要记录的东西。在里面 在这种情况下，我们会注意外部因素 链接和图片链接-仅供参考 举个例子

---

我认为“子代码”是属性值的一个别致名称，前缀是一些东西，可以使用

[attr |=val]

属性选择器来选择。您可以阅读有关数据属性的内容，但我认为在选择数据属性时，没有必要在

数据

前面加一个破折号。@任何人都在疯狂地投票。如果有人投了反对票，请解释一下为什么，以及可以做些什么来改进这个问题。现在还不清楚你想做什么。与其让别人教你选择器引擎是如何工作的，你能更具体地举一个你试图解决的问题的例子吗？包括一些HTML和一个问题，说明您试图使用选择器引擎针对HTML中的哪个对象。@jfriend00我的问题中有HTML，有关于我试图做什么的解释，我不知道这些选择器是如何工作的。去投票吧，我不介意。@不管它值多少钱，我发现你的问题很清楚-看我的答案

qwery("a[-data-innerHTML='Hello']");

<a href="http://x.y.com/path/to/image.jpg" 
data-info="external image">Link to image on another server</a>

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}