关于css3：“?”(波浪/波浪/旋转)CSS选择器是什么意思？


What does the “~” (tilde/squiggle/twiddle) CSS selector mean?

搜索~字符并不容易。 我正在查看一些CSS并找到了这个

1
2
.check:checked ~ .content {
}

这是什么意思？

相关讨论

~选择器实际上是General sibling组合子(在选择器级别4中重命名为Subsequent-sibling combinator)：

The general sibling combinator is made of the"tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in the
document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.

请考虑以下示例：

1
2
3
.a ~ .b {
  background-color: powderblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul>

  <li class="b">1st
</li>

  <li class="a">2nd
</li>

 
<li>
3rd
</li>

  <li class="b">4th
</li>

  <li class="b">5th
</li>


</ul>

.a ~ .b匹配第4和第5个列表项，因为它们：

  • 是.b元素
  • 是.a的兄弟姐妹
  • 出现在HTML源代码中的.a之后。

同样，.check:checked ~ .content匹配作为.check:checked兄弟的所有.content元素并出现在它之后。

相关讨论

一般兄弟组合

The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it.

更多信息

很高兴也检查家庭中的其他组合器，并回到这个具体的组合。

  • ul li
  • ul > li
  • ul + ul
  • ul ~ ul

示例清单：

  • ul li - 向内看 - 选择ul内放置(任何位置)的所有li元素;后代选择器
  • ul > li - 向内看 - 仅选择ul的直接li元素;即它只会选择ul的直接子li;子选择器或子组合选择器
  • ul + ul - 向外看 - 在ul之后立即选择ul;它不是向内看，而是在外面寻找紧随其后的元素;相邻的兄弟选择器
  • ul ~ ul - 向外看 - 选择ul之后的所有ul并不重要，但两个ul应该具有相同的父级;一般兄弟选择器

我们在这里看到的是General Sibling Selector

相关讨论

它是General sibling combinator并且在@ Salaman的答案中得到了很好的解释。

我错过的是Adjacent sibling combinator，它是+并且与~密切相关。

例子就是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.a + .b {
  background-color: #ff0000;
}


<ul>

  <li class="a">1st
</li>

  <li class="b">2nd
</li>

 
<li>
3rd
</li>

  <li class="b">4th
</li>

  <li class="a">5th
</li>


</ul>
  • 匹配.b的元素
  • 与.a相邻
  • 在HTML中.a之后

在上面的示例中，它将标记为2nd li但不是第4个。

1
2
3
   .a + .b {
     background-color: #ff0000;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul>

  <li class="a">1st
</li>

  <li class="b">2nd
</li>

 
<li>
3rd
</li>

  <li class="b">4th
</li>

  <li class="a">5th
</li>


</ul>

的jsfiddle

请注意，在属性选择器(例如，[attr~=value])中，波浪号

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors