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

发布于 2024-11-18 01:21:52 字数 643 浏览 1 评论 0原文

您好，我正在使用 dustin Diaz 的“Qwery”选择器引擎如果您单击该链接，示例页面会显示选择器例如

div#baz.thunk a[-data-info*="hello world"] span + Strong {}

和

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

我无法理解的用法子代码和数据信息我什至阅读了CSS2选择器w3c页面，但无法理解它，有人可以用简单的例子解释我的概念。 -data-info 匹配innerHTML，如下所示的对象的Dom属性

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

，当我执行下面的选择器时，它会给我上面的元素，

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

请澄清我的概念并建议我查询以获取innerHTML/。使用 qwery 选择器引擎的其他属性

原文

Hi i am using 'Qwery" selector engine by dustin diaz if you clicked that link, the sample page shows selectors like

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

and

#foo a[lang|=en] {} subcodes

i couldn't understand the use of subcodes and data-info i even read the CSS2 selector w3c page but could not comprehend from it. Could someone explain using simple example how these works. My notion of -data-info is match innerHTML, Dom properties of a object like below

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

and when i executed the below selector it would give me the above element.

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

please do clarify my notions and suggest me query to write to get the innerHTML/other properties using qwery selector engine

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安静被遗忘 2024-11-25 01:21:52

这是一篇好文章

http:// www.programmervn.com/2010/11/30-css-selectors-you-must-memorize-part.html

http://www.programmervn.com/2010 /11/30-css-selectors-you-must-memorize-part_17.html

摘录：

这是一个令人印象深刻的特别的
你的朋友们。没有太多人知道
关于这个技巧。蒂尔达 (~) 符号
允许我们定位一个属性
有一个以空格分隔的值列表。
与我们的自定义属性一起使用
从上面的第十五条开始，我们可以
创建一个 data-info 属性，其中
可以接收一个空格分隔的列表
任何我们需要注意的事情。在
在这种情况下，我们将记下外部
链接和图像链接——仅用于
示例。

<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;
}

Here is a good Article

http://www.programmervn.com/2010/11/30-css-selectors-you-must-memorize-part.html

http://www.programmervn.com/2010/11/30-css-selectors-you-must-memorize-part_17.html

Extract:

Here’s a special one that’ll impress
your friends. Not too many people know
about this trick. The tilda (~) symbol
allows us to target an attribute which
has a spaced-separated list of values.
Going along with our custom attribute
from number fifteen, above, we could
create a data-info attribute, which
can receive a space-separated list of
anything we need to make note of. In
this case, we’ll make note of external
links and links to images — just for
the example.

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

With that markup in place, now we can target any tags that have either of those values, by using the ~ attributes selector trick.

/* 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;
}

回复收藏 0 原文

~没有更多了~