在复杂的 jQuery/CSS3 选择器中使用 TILDE答案

【问题标题】：Usage of TILDE inside a complex jQuery/CSS3 selector在复杂的 jQuery/CSS3 选择器中使用 TILDE
【发布时间】：2015-01-22 23:20:46
【问题描述】：

我很难理解我在 jsFiddle (http://jsfiddle.net/Pm3cj/3/) 中找到的 jQuery 选择器。选择器是：

'~.container, ~:has(.container)'

代字号是什么意思？

我在 jQuery 和 W3C 网站上进行了很多搜索，但没有找到波浪号的这种用法。至少我没认出来。

谁能告诉我波浪号的这种用法在哪里解释？

【问题讨论】：

@Quentin - 我假设您的仓促回复暗示了w3.org/TR/selectors/#general-sibling-combinators - 我的问题是：为什么波浪号之前没有选择器？ W3C 究竟在哪里显示了这种用法？
@davidkonrad - 我假设你的仓促回复暗示w3.org/TR/selectors/#general-sibling-combinators - 我的问题是：为什么波浪号之前没有选择器？请尝试回答我的问题，这不是其他用户特别想知道的。
@Quentin - 很高兴看到你居高临下的评论消失了。
Lamers 删除他们自己令人尴尬的错误回复并匿名投反对票。太好了……
失火了？你是什么意思？

【解决方案1】：

请记住，jQuery 选择器语法基于 CSS 选择器语法，而在 CSS 中，波浪号表示“任何以下同级”。所以

`~:has(.container)`

...查找具有container 类的任何进行中的兄弟姐妹。

【讨论】：

在我的问题中，我暗示这可能是“下一个兄弟姐妹”选择器的变体。关键是我在 W3C 文档上看到的所有示例都是“X ~ Y”。在这种情况下，似乎没有 X。我的问题是：1）是否存在隐含的 X？那是当前的 jquery 选择器吗？ 3）这种特殊情况在哪里说明？我感谢你的努力。谢谢。
@jbutler483 - 我假设您在 w3.org/TR/selectors/#general-sibling-combinators 的仓促回复提示 - 我的问题是：为什么波浪号之前没有选择器？ W3C 究竟在哪里显示了这种用法？
不，我打算给你看这个implementation - 它指的是“完全”，嗯，更准确地说是“包含”。

【解决方案2】：

这将是一个尴尬的评论，所以这里是：

这是一个例子；

[att~=val]

来自docs；

表示具有att属性且值为白色的元素以空格分隔的单词列表，其中之一就是“val”。如果“瓦尔” 包含空白，它永远不会代表任何东西（因为单词之间用空格隔开）。如果 "val" 是空字符串，它将也从不代表任何东西。

以下选择器说明了“=”和 “~=”。第一个选择器将匹配，例如，值“版权 “rel”属性的 copyleft copyeditor”。第二个选择器将仅当“href”属性具有值时匹配 “http://www.w3.org/”。

a[rel~="copyright"]
a[href="http://www.w3.org/"]

通过阅读本文，我希望你能理解它的物理用途。它允许您选择“包含”。由于没有真正的“:includes”选择器，因此可以使用“~”，通常与:contains 一起使用。

我相信你的榜样，

'~.container, ~:has(.container)'

正在测试您是否可以在此之后的任何位置“找到”类container，或者在您的“按钮单击”元素之后的任何位置“包含”此container 的元素。

【讨论】：

@jbutler484 - 感谢您的努力。你能告诉我 rel~="copyright" 如何映射到 ~:has(.container) 吗？我在这里看到两个问题：1）在第二个示例中，什么代替了“rel”？ 2) 我们可以用 :has() 交换 = 吗？ W3C 仅将波浪号与 = 关联，表示“字符串包含”。没有提到其他用途。你曾经以这种方式使用过波浪号吗？
我从来没有真正需要这种实现——我只能猜测它是在您无法控制外部 html 样式表时使用的。但是有（我 99% 确定）方法可以完全避免这种尴尬的实现，因为我从来没有觉得有必要实现它。（但是，我使用波浪号作为兄弟选择器，但以前没有这样的选择）。
不错的尝试，但仍然没有雪茄 :-) 在我提出这个问题之前的搜索中，我也分析了这种情况（这与 ~= 业务不同），在这里我错过了左操作数。请参阅我对 Utkanos 尝试回答的评论。我的猜测是 jQuery 正在通过使用隐式左操作数来调整 CSS3 标准，但我找不到任何其他这种做法的例子。
@Muzietto：更改小提琴似乎不会影响输出see here。我可能只是原作者的错误/问题。
不。我也试过了。您可以通过单击自己小提琴中的链接来判断行为肯定已经改变。这个选择器有一些魔力。