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

时间:2015-01-22 14:07:30

标签: css3 jquery-selectors

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

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

代字号是什么意思?

  • 是一种:not
  • 是某种部分匹配~=运算符吗?
  • 是“下一个兄弟姐妹”选择器的一些变体吗?

我在jQuery 和W3C 网站上搜索过很多内容,却没有找到代字号的这种用法。至少我没认出来。

任何人都可以告诉我这种波浪号的用法在哪里解释了?

2 个答案:

答案 0 :(得分:1)

请记住,jQuery选择器语法基于CSS选择器语法,而在CSS中,代字号表示“以下任何兄弟姐妹”。所以

`~:has(.container)`

...找到任何具有班级container的正在进行的兄弟姐妹。

答案 1 :(得分:1)

这将是一个尴尬的评论,所以这里是:

这是一个例子;

[att~=val]

来自docs;

  

表示具有att属性的元素,其值为白色   以空格分隔的单词列表,其中一个正是" val"。如果" val"   包含空格,它永远不会代表任何东西(因为   单词用空格分隔)。如果" val"是空字符串,它会   从不代表任何东西。


  

以下选择器说明" ="之间的差异。和   "〜=&#34 ;.例如,第一个选择器将匹配值" copyright   copyleft copyeditor"对于" rel"属性。第二个选择器会   只有当" href"属性具有值   " http://www.w3.org/"

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

从阅读本文开始,我希望您能够理解物理使用。它允许您选择'包括'因此。由于没有真正的' :includes'选择器,' ~'可以使用,通常使用:contains


我相信你的例子,

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

测试是否可以找到'此后任何地方的课程container,或者包含'点击“'”按钮后的任意位置container元件。